属性选择器
属性选择器在 CSS2 中就已经被引入,并且在 CSS3 及更高版本中仍然被广泛使用,因为它们提供了一种灵活且强大的方式来选择具有特定属性的元素。
[attr]:
是一个属性选择器,用于选择具有指定属性的所有元素,而不论该属性的值是什么。这里的 attr 应该替换为你想要选择的属性名。
例如,如果你想要选择所有具有 data-custom 属性的元素,你可以这样写:
<style>[data-custom] { /* 选择具有自定义属性的元素的CSS样式 */ color: purple; }
</style>
<!--这条 CSS 规则会匹配所有带有 data-custom 属性的元素,不论该属性的值是什么 下边的元素都会被选中-->
<div data-custom="value1">This div has a data-custom attribute with value1.</div>
<span data-custom="value2">This span has a data-custom attribute with value2.</span>
<p data-custom>This paragraph has a data-custom attribute with no value.</p>
在上述 HTML 中,所有的 div、span 和 p 元素都会被选择并应用 color: purple; 样式,因为它们都带有 data-custom 属性,尽管它们的属性值可能不同或者没有值。
[attr=value]:
选择具有指定属性和值的元素。
<style>
div[id="box"]{background-color:#c00;}
</style><div id="box"></div>
[attr^=value]:选择属性值以特定字符串开头的元素。
<style>
div[class^="box-"]{background-color:#c00;}
</style><div class="box-abc">q</div><!--被选中-->
<div class="box-bcd">w</div><!--被选中-->
<div class="a box-x">e</div><!--不被选中-->
[attr$=value]:
选择属性值以特定字符串结尾的元素。
<style>
div[class$="-abc"]{background-color:#c00;}
</style><div class="b-ab">4</div><!--被选中-->
<div class="b_ab">5</div><!--被选中-->
<div class="ab box">6</div><!--不被选中-->
[attr*=value]:
选择属性值中包含特定字符串的元素,必须完全包含
<style>
div[class*="xy"]{background-color:#c0c;}
</style><div class="b-xy-one">4</div><!--被选中-->
<div class="xyz">5</div><!--被选中-->
<div class="youx">6</div><!--不被选中-->
[attr~=value]:
是一个属性选择器,用于选择具有指定属性的元素,且该属性的值必须是一个由空格分隔的列表,其中包含指定的词或短语。这里的 ~= 表示“包含词列表中的词”。
例如:假设你有一些带有 class 属性的 HTML 元素,这些 class 属性的值是由空格分隔的多个类名组成的列表。你可以使用 [attr~=value] 选择器来选择包含特定类名的元素。
<style>[class~=feature] { /* 选择一个具有包含单词“feature”的类的元素 */ background-color: blue; }
</style>
<div class="box feature">This is a featured box.</div>
<div class="box">This is a regular box.</div>
<div class="highlight feature">This is a highlighted feature box.</div>
在这个例子中,第一个和第三个 div 元素都会被选中,因为它们的 class 属性值中包含了词 feature。而第二个 div 元素则不会被选中,因为它的 class 属性值中没有包含 feature 这个词。
请注意,[attr~=value] 选择器对大小写敏感,除非在 HTML 文档中明确指定了属性值的大小写不敏感(这通常不是标准做法)。因此,确保在编写 CSS 选择器时使用与 HTML 属性值完全匹配的大小写是很重要的。
此外,虽然这个选择器在 CSS2 中就已经存在,但它在 CSS3 及更高版本中仍然被支持,并且经常与其他选择器和属性一起使用,以实现更复杂的样式和布局需求。
[attr|=value]:
是一个属性选择器,用于选择具有指定属性的元素,且该属性的值必须是以指定值开头的词或短语,或者是与指定值完全相等。这里的 |= 表示“以…开头或以连字符(-)分隔的精确值”
这个选择器通常用于选择具有特定语言或特定前缀的属性值的元素。例如,在 HTML 中,lang 属性经常用于指定元素内容的语言。如果你想要选择所有以 “en” 开头的 lang 属性的元素(如 lang=“en”, lang=“en-US”, lang=“en-GB” 等),你可以使用 [lang|=en] 选择器。
<style>[class|=en] { /* 选择lang属性值以“en”开头的元素 */ background-color: green; }
</style>
<div class="en box">This is a featured box.</div> <!--被选中-->
<div class="en-US box">This is a regular box.</div> <!--被选中-->
<div class="engliish feature">This is a highlighted feature box.</div>
<div class="en_US feature">This is a highlighted feature box.</div>
然而,需要注意的是,这个选择器的行为可能与你预期的不完全一样。按照规范,它实际上会匹配属性值等于 “en” 或者属性值以 “en-” 开头的元素。也就是说,它会匹配 lang=“en” 和 lang=“en-US”,但不会匹配 lang=“english” 或 lang=“en_US”(注意下划线而不是连字符)。
但在实际使用中,很多开发者可能会误以为它会匹配任何以指定值开头的属性值,而不仅仅是那些以连字符分隔的值。因此,在使用这个选择器时要特别小心,确保你的属性值格式与选择器的行为相匹配。
[attr^=“val”][attr$=“val”]
可以多个属性选择器叠加起来进行使用。
<style>
/* 以 "https" 开始,".org" 结尾的链接 */
a[href^="https"][href$=".org"] {color: green;}
</style><ul><li><a href="#internal">内部链接</a></li><li><a href="http://example.com">示例链接</a></li><li><a href="#InSensitive">非敏感内部链接</a></li><li><a href="http://example.org">示例 org 链接</a></li><li><a href="https://example.org">示例 https org 链接</a></li><!--被选中-->
</ul>
请注意,属性选择器是区分大小写的,除非在 HTML 文档中明确指定了属性名不区分大小写(这在实际开发中是非常罕见的)。因此,确保在编写 CSS 选择器时属性名的大小写与 HTML 中的实际使用保持一致是很重要的。
新增属性选择器,可以添加大小写规则
[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I),可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)。
[attr operator value s]
在属性选择器的右方括号前添加一个用空格隔开的字母 s(或 S),可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)。
<style>
/* 根据文档语言不同,大小写敏感性不同 */
ol[type="a"] {
/*这里测试的最新火狐和 最新 chrome ,最新 edge都支持*/list-style-type: lower-alpha;background: red;
}
/*这里测试的最新火狐支持;最新 chrome ,最新 edge都不支持*/
ol[type="b" s] {list-style-type: lower-alpha;background: lime;
}
/*这里测试的最新火狐支持;最新 chrome ,最新 edge都不支持*/
ol[type="B" s] {list-style-type: upper-alpha;background: grey;
}
/*这里测试的最新火狐和 最新 chrome ,最新 edge都支持*/
ol[type="c" i] {list-style-type: upper-alpha;background: green;
}
</style><ol type="A"><li>非大小写敏感匹配呈现红色背景(类型选择器默认值)</li>
</ol><ol class="A"><li>大小写敏感所以不会被呈现红色背景</li>
</ol><ol type="b"><li>如果支持 `s` 修饰符(大小写敏感匹配),拥有亮绿色背景</li>
</ol>
<ol type="B"><li>如果支持 `s` 修饰符(大小写敏感匹配),拥有灰色背景</li>
</ol>
<ol type="C"><li>如果支持 `i` 修饰符(大小写不敏感匹配),拥有绿色背景</li>
</ol>