屬性選擇器
概述
屬性選擇器可以與各種型別的運算子一起使用，從而相應地更改選擇標準。他們使用給定屬性或屬性值的選擇來選擇元素。
筆記：
-
屬性值可以用單引號或雙引號括起來。根本沒有引號可能也有效，但根據 CSS 標準，它是無效的，並且不鼓勵。
-
沒有單一的整合 CSS4 規範，因為它被拆分為單獨的模組。但是，有“4 級”模組。檢視瀏覽器支援 。
細節
[attribute]
選擇具有給定屬性的元素。
div[data-color] {
color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>
[attribute="value"]
選擇具有給定屬性和值的元素。
div[data-color="red"] {
color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>
[attribute*="value"]
選擇具有給定屬性和值的元素，其中給定屬性在任何位置包含給定值（作為子字串）。
[class*="foo"] {
color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>
[attribute~="value"]
選擇具有給定屬性和值的元素，其中給定值出現在以空格分隔的列表中。
[class~="color-red"] {
color: red;
}
<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>
[attribute^="value"]
選擇具有給定屬性和值的元素，其中給定屬性以值開頭。
[class^="foo-"] {
color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>
[attribute$="value"]
選擇具有給定屬性和值的元素，其中給定屬性以給定值結束。
[class$="file"] {
color: red;
}
<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>
[attribute|="value"]
選擇具有給定屬性和值的元素，其中屬性的值恰好是給定值，或者恰好是給定值，後跟 -（U + 002D）
[lang|="EN"] {
color: red;
}
<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>
[attribute="value" i]
選擇具有給定屬性和值的元素，其中屬性的值可以表示為 Value，VALUE，vAlUe 或任何其他不區分大小寫的可能性。
[lang="EN" i] {
color: red;
}
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>
屬性選擇器的特殊性
0-1-0
與類選擇器和偽類相同。
*[type=checkbox] // 0-1-0
請注意，這意味著屬性選擇器可用於通過 ID 以較低的特異性水平選擇元素，而不是使用 ID 選擇器選擇元素：[id="my-ID"] 的目標元素與 #my-ID 相同，但特異性較低。
有關更多詳細資訊，請參見語法部分 。