CSS3-属性选择器

属性选择器

属性选择器是 CSS3 的新增特性，允许我们通过标签属性匹配选中 HTML 元素。

存否和值选择器

基于一个元素自身是否存在某个属性，或者对属性值的各式不同匹配，来选取元素。

selector	example	element	description
[attr]	a[title]	<a title>test</a>	匹配带有 attr 属性（方括号内）的元素
[attr=value]	a[href="example.com"]	<a href="https://example.com">test</a>	匹配带 attr 属性且值为 value（引号中的字符串）的元素
[attr~=value]	a[class~="special"]	<a class="common special">test</a>	匹配带有 attr 属性的元素，其值为用空格分隔的字词列表，其中一个等于 value 的元素
[attr|=value]	a[class|="special"]	<a class="special-tag">test</a>	匹配带有 attr 属性的元素，其值可为 value，或开始为 value，后面紧随着一个连字符

li[class] {
    font-weight: 600;
}
li[class='a'] {
    background-color: yellow;
}
li[class~='a'] {
    color: blue;
}
li[class|='a'] {
    color: red;
}

<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
    <li class="a-b">Item 5</li>
</ul>

子字符串匹配选择器

基于更高级的属性值的子字符串的匹配，来选取元素。(参考正则表达式的元字符)

selector	example	element	description
[attr^=value]	div[class^="box-"]	<div class="box-one">box-one</div>	匹配带 attr 属性的元素，其值开头为 value 子字符串
[attr$=value]	div[class^="-box"]	<div class="first-box">first-box</div>	匹配带 attr 属性的元素，其值结尾为 value 子字符串
[attr*=value]	div[class*="one"]	<div class="box-one">box</div>	匹配带 attr 属性的元素，其值的任何地方，至少出现了一次 value 子字符串

li[class*='a'] {
    color: red;
}
li[class^='a'] {
    background-color: yellow;
}
li[class$='a'] {
    background-color: gray;
}

<ul>
    <li class="ab">Item 1</li>
    <li class="ba">Item 2</li>
</ul>

大小敏感

如果想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号（[ ]内）之前使用 i 值。这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。
没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配 —— HTML 中是大小写敏感的。

li[class^='a'] {
    background-color: yellow;
}
li[class^='a' i] {
    color: red;
}

<ul>
    <li class="a">Item 1</li>
    <li class="A">Item 2</li>
</ul>