css属性选择器 过滤

CSS中有许多选择器，其中属性选择器可以通过指定html元素的属性值来选中对应的元素。属性选择器有如下几种：

[class="value"] 匹配class属性值为value的元素[id="value"] 匹配id属性值为value的元素[attr^="value"] 匹配属性以value开头的元素[attr$="value"] 匹配属性以value结尾的元素[attr*="value"] 匹配属性包含value的元素[attr|="value"] 匹配属性以value开头或以value-开头的元素[attr="value" i] 匹配属性值为value且不区分大小写的元素

举个例子：

div class="fruit">
    apple/div>
    div class="fruit">
    banana/div>
    div class="fruit">
    orange/div>
    div>
    grape/div>
/* 选中class属性值为fruit的元素 */div[class="fruit"] {
      background-color: yellow;
}
/* 选中属性值以a开头的元素 */div[class^="a"] {
      color: red;
}
/* 选中属性值含an的元素 */div[class*="an"] {
      color: green;
}
    

上面的例子中，第一个样式选中了所有class属性值为fruit的元素，将它们的背景色设置成了黄色。第二个样式选中了class属性值以a开头的元素，即选中了apple元素，并将它的字体颜色设成了红色。第三个样式选中了class属性值中包含字符串an的元素，即选中了banana和orange元素，并将它们的字体颜色设成了绿色。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！