[CSS]属性选择器
前言
一次性选择多个元素进行CSS样式的书写，最普通的方式就是为它们添加一个相同的类名，然后以这个类名书写共同的样式。
但是有一个更加简单且灵活的选择器可以代替上述方式，即属性选择器。属性选择器的匹配规则类似于正则表达式，它可以匹配一个元素的属性，或者属性的值。
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
上面一些 div 元素的 class 属性的值拥有部分相同的字符 row-（或 row），利用属性选择器，然后对这些元素进行 CSS 样式书写：
div[class="row-"] { ... }
语法
属性选择器的语法有很多，所以书写 CSS 样式会更加地灵活。
[attr]
[attr]表示选择包含了该属性的元素。
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<style>
div[style] {
font-size: 40px;
}
</style>
我们只选择了包含了有 style 属性的 div 元素，样式只对这类元素有效，对第三个 div 元素是没有影响的，所以最终只有第一个和第二个 div 元素的字体发生了变化。
[attr=value]
[attr=value]表示选择包含了该属性的，并且这个属性等于一个具体值的元素。
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<style>
div[class="row-1"] {
font-size: 20px;
}
</style>
我们只选择了包含了有 class 属性的 div 元素，并且 class 属性的值是 row-1 的元素，样式只对第一个有效，所以最终只有第一个 div 元素的字体发生了变化。
[attr~=value]
[attr~=value]表示选择包含了该属性的，并且这个属性有多个值的元素，比如，class="a b c d e"。
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<style>
div[class~="alias-1"] {
font-size: 40px;
}
</style>
其他形式的属性选择器对于拥有多个值的属性，无法正确地匹配。
第一个 div 元素的 class 属性有多个值，应该使用 [attr~=value] 形式的属性选择器匹配。
[attr|=value]
[attr|=value]表示选择包含了该属性的，并且这个属性的值是以 value- 或 value 的形式，比如，class="row-1" 或 class="row"。
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<style>
div[class|=‘row‘] {
font-size: 40px;
}
</style>
匹配以 row 或 row-* 的 div 元素。
提示：[attr|=value] 形式的属性选择器只能匹配到属性中第一个值，从第二个及以后的值是无法匹配的。
[attr^=value]
[attr^=value]表示选择包含了该属性的，并且这个属性的第一个值的字符中包含以 value 开头的子字符的元素。
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<style>
div[class^=‘ro‘] {
font-size: 40px;
}
</style>
只要第一个值的字符中包含了 ro 的子字符，都将被选择并运用样式。
[attr$=value]
[attr$=value] 与 [attr^=value] 的作用类似，只不过前者是以字符中包含以 value 结尾的子字符的元素。
div[class^=‘ro‘] {
font-size: 40px;
}
最终的效果与上图一致。
[attr*=value]
[attr*=value] 匹配属性中的值的字符中包含以 value 的子字符的元素。
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<style>
div[class*=‘-1‘] {
font-size: 40px;
}
</style>
在三个 div 元素的 class 属性中，它们的值都有 -1 这个子字符，所以，[attr*=value] 形式的属性选择器会匹配到这三个元素，并运用样式。
[CSS]属性选择器
[db:回答]