CSS屬性選擇器

了解如何使用CSS屬性選擇器

在本文中，我將介紹屬性選擇器。

另請參閱基本CSS選擇器簡介。在這裡，我介紹了幾個基本的CSS選擇器：使用類型選擇器，類，id，如何組合它們，如何定位多個類，如何在同一規則中為多個選擇器設置樣式，如何使用子級和直接型遵循頁面層次結構子選擇器和相鄰的兄弟姐妹。

屬性存在選擇器

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

我們可以檢查一個元素已使用的屬性[]句法。p[id]將全選p頁面中具有id屬性，無論其值如何：

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

確切的屬性值選擇器

在方括號內，您可以使用=，並且僅當屬性與指定的確切值匹配時，才會應用CSS：

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

匹配屬性值部分

儘管=讓我們檢查確切的值，我們還有其他運算符：

  • *=檢查屬性是否包含部分
  • ^=檢查屬性是否以不完整部分開頭
  • $=檢查屬性是否以部分結尾
  • |=檢查屬性是否以partial開始，並在其後跟一個破折號（例如，在類中很常見），或者僅包含partial
  • ~=檢查部分屬性是否包含在屬性中，但與其餘部分之間用空格分隔

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

如果您添加i緊接在右括號之前，該檢查將不區分大小寫。許多瀏覽器都支持它，但並非所有瀏覽器都支持，請檢查https://caniuse.com/#feat=css-case-insensitive。

免費下載我的CSS手冊


更多CSS教程：


在線技術維基！