屬性選擇器學習筆記

對帶有指定屬性的 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

總結

以上是生活随笔為你收集整理的属性选择器学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。