在這篇文章中,我將介紹屬性選擇器的使用方法。

你也可以參考 基本 CSS 選擇器介紹文章,在那裡我介紹了幾種基本的 CSS 選擇器:使用類型選擇器、類別、ID,如何結合它們,如何選擇多個類別,如何在同一規則中樣式化多個選擇器,如何使用子選擇器和直接子選擇器來遵循頁面層級,以及相鄰兄弟元素選擇器。

屬性存在選擇器

第一種選擇器類型是屬性存在選擇器。

我們可以使用 [] 語法來檢查元素是否具有某個屬性。p[id] 將選中頁面中所有帶有 id 屬性的 p 標籤,無論其值為何:

p[id] {
 /* ... */
}

精確屬性值選擇器

在方括號內,你可以使用 = 來檢查屬性值,只有當屬性與指定的精確值匹配時,CSS 才會生效:

p[id="my-id"] {
 /* ... */
}

匹配屬性值部分

雖然 = 讓我們可以檢查精確值,但我們還有其他運算符:

  • *= 檢查屬性是否包含該部分值
  • ^= 檢查屬性是否以該部分值開頭
  • $= 檢查屬性是否以該部分值結尾
  • |= 檢查屬性是否以該部分值和連字符開頭(在類別中很常見),或者只包含該部分值
  • ~= 檢查屬性是否在屬性中包含該部分值,但是與其它部分之間用空格隔開

我們提到的所有檢查都是區分大小寫的。

如果在方括號的結尾加上 i,檢查就會忽略大小寫。它在許多瀏覽器中都有支持,但並非所有瀏覽器都支持,可以在 https://caniuse.com/#feat=css-case-insensitive 進行檢查。