溫馨提示×

css3選擇器類型有哪些

小億
114
2023-07-10 12:18:54
欄目: 編程語言

CSS3選擇器類型有以下幾種：

  1. 元素選擇器（Element Selector）：通過元素名稱來選擇元素，例如p選擇所有<p>元素。

  2. 類選擇器（Class Selector）：通過類名來選擇元素，以.開頭，例如.container選擇所有類名為container的元素。

  3. ID選擇器（ID Selector）：通過元素的ID屬性來選擇元素，以#開頭，例如#header選擇ID為header的元素。

  4. 通配選擇器（Universal Selector）：選擇所有元素，使用*表示。

  5. 屬性選擇器（Attribute Selector）：通過元素的屬性來選擇元素，例如[type="text"]選擇所有type屬性值為text的元素。

  6. 后代選擇器（Descendant Selector）：選擇某個元素的后代元素，使用空格分隔，例如.container p選擇所有位于類名為container的元素內(nèi)的<p>元素。

  7. 直接子元素選擇器（Child Selector）：選擇某個元素的直接子元素，使用>分隔，例如.container > p選擇所有位于類名為container的元素下的直接子級<p>元素。

  8. 兄弟選擇器（Adjacent Sibling Selector）：選擇某個元素的下一個兄弟元素，使用+分隔，例如.container + p選擇位于類名為container的元素后面的第一個兄弟<p>元素。

  9. 偽類選擇器（Pseudo-class Selector）：選擇元素的特定狀態(tài)或位置，以:開頭，例如:hover選擇鼠標(biāo)懸停在元素上的狀態(tài)。

  10. 偽元素選擇器（Pseudo-element Selector）：選擇元素的特定部分，以::開頭，例如::before選擇元素的前面插入的內(nèi)容。

  11. 否定選擇器（Negation Selector）：選擇不符合指定條件的元素，以:not()包裹條件，例如:not(.container)選擇不具有類名為container的元素。

  12. 狀態(tài)選擇器（State Selector）：選擇元素的特定狀態(tài)，例如:checked選擇已選中的復(fù)選框或單選按鈕。

  13. UI元素狀態(tài)選擇器（UI Element State Selector）：選擇元素的特定用戶界面狀態(tài)，例如:enabled選擇可用的表單元素。

  14. 結(jié)構(gòu)性偽類選擇器（Structural Pseudo-class Selector）：選擇元素的特定位置或結(jié)構(gòu)，例如:first-child選擇父元素下的第一個子元素。

  15. 網(wǎng)格布局選擇器（Grid Layout Selector）：選擇網(wǎng)格布局中的元素，例如:nth-column()選擇網(wǎng)格布局中的第n列。

0 踩