属性选择器学习笔记

属性选择器学习笔记

对带有指定属性的 HTML 元素设置样式。 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。 注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

[attribute] 匹配带有指定属性名的所有元素。

例: div[class]{backgournd:black;} 匹配所有拥有class的div

---

[attribute=value] 匹配属性名和属性值与代码完全一致的元素。

例:div[class="col"]{backgournd:black;} 匹配class="col"的div，且class只能是col,也就是属性名和值必须与给出代码完全一致。比如

<div class="col center"></div>
复制代码

上例就无法选择。

---

[attribute~=value] 匹配属性值中包含指定值的元素, 且该值必须是整个单词, 不能匹配仅包含这个值的元素。

例: div[class="col"]{background:black} 可以匹配:

<div class="col center"></div>
复制代码

不可匹配:

<div class="colume center"></div>
复制代码

---

[attribute|=value] 选取属性值中以指定值开头的元素，该值必须是整个单词开头。不能匹配开头仅包含这个词的元素，但-可视作空格。

例: div[class|=col]{background:black} 匹配

`<div class="col center"></div>`
`<div class="col-center"></div>`
复制代码

不匹配

`<div class="center col"></div>`, `<div class="colume center"></div>` 
复制代码

原因同上

---

[attribute^=value] 匹配以指定属性值开头的每个元素；value可以是实际属性值开头的一部分，注意和上面区分。

例: div[class^="col"]{backgournd:black;}

<div class="colume center"></div>
复制代码

上例就可以匹配。

---

[attribute$=value] 匹配以指定属性值结尾的每个元素。value可以是实际属性值结尾的一部分。

例: div[class$="col"]{backgournd:black;} 匹配 <div class="center foo-col"></div>

---

[attribute*=value] 匹配包含指定属性值的每个元素。value可以是实际属性值的一部分。

例: div[class*="col"]{backgournd:black;} 匹配 <div class="center foo-col-bar"></div>

参考: CSS css_syntax_attribute_selector

转载于:https://juejin.im/post/5aa52c76518825558a063df1