/

CSS 屬性選擇器

CSS 屬性選擇器

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

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

屬性存在選擇器

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

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

1
2
3
p[id] {
 /* ... */
}

精確屬性值選擇器

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

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

匹配屬性值部分

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

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

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

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

tags: [“css”, “attribute selectors”]