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