在這篇文章中,我將介紹屬性選擇器的使用方法。
你也可以參考 基本 CSS 選擇器介紹文章,在那裡我介紹了幾種基本的 CSS 選擇器:使用類型選擇器、類別、ID,如何結合它們,如何選擇多個類別,如何在同一規則中樣式化多個選擇器,如何使用子選擇器和直接子選擇器來遵循頁面層級,以及相鄰兄弟元素選擇器。
屬性存在選擇器
第一種選擇器類型是屬性存在選擇器。
我們可以使用 []
語法來檢查元素是否具有某個屬性。p[id]
將選中頁面中所有帶有 id
屬性的 p
標籤,無論其值為何:
p[id] {
/* ... */
}
精確屬性值選擇器
在方括號內,你可以使用 =
來檢查屬性值,只有當屬性與指定的精確值匹配時,CSS 才會生效:
p[id="my-id"] {
/* ... */
}
匹配屬性值部分
雖然 =
讓我們可以檢查精確值,但我們還有其他運算符:
*=
檢查屬性是否包含該部分值^=
檢查屬性是否以該部分值開頭$=
檢查屬性是否以該部分值結尾|=
檢查屬性是否以該部分值和連字符開頭(在類別中很常見),或者只包含該部分值~=
檢查屬性是否在屬性中包含該部分值,但是與其它部分之間用空格隔開
我們提到的所有檢查都是區分大小寫的。
如果在方括號的結尾加上 i
,檢查就會忽略大小寫。它在許多瀏覽器中都有支持,但並非所有瀏覽器都支持,可以在 https://caniuse.com/#feat=css-case-insensitive 進行檢查。