常見的CSS3選擇器有哪些？

CSS3是一種用於網頁設計的樣式表語言，它具有豐富的選擇器，這些選擇器可以幫助我們更精確地指定要樣式化的HTML元素。以下將介紹一些常用的CSS3選擇器，並給出對應的程式碼範例。

1. 元素選擇器（Element Selector）
   元素選擇器是最基本的選擇器，可以選擇HTML文件中的特定元素進行樣式化。例如，要將所有的段落元素（

   ）的文字顏色設為紅色，可以使用以下程式碼：

p {
    color: red;
}

2. 類別選擇器（Class Selector）
   類選擇器可用於選擇具有相同類別名稱的元素。透過為元素新增class屬性，我們可以將其與對應的樣式規則關聯起來。例如，要將所有具有"class1"類別的元素的背景顏色設為黃色，可以使用下列程式碼：

.class1 {
    background-color: yellow;
}

3. ID選擇器（ID Selector）
   ID選擇器與類別選擇器類似，都是用來選擇指定的元素。不同的是，ID選擇器選擇的是具有唯一ID的元素。透過為元素新增id屬性，我們可以將其與對應的樣式規則關聯起來。例如，要將具有"id1"的元素的字體大小設為20像素，可以使用以下程式碼：

#id1 {
    font-size: 20px;
}

4. 偽類選擇器（Pseudo-class Selector）
   偽類別選擇器可根據元素的狀態或位置選擇元素，從而實現對元素的不同樣式化。常用的偽類選擇器有:hover、:visited、:first-child等。例如，要將滑鼠懸停在所有連結上時，連結文字變成紅色，可以使用以下程式碼：

a:hover {
    color: red;
}

5. 屬性選擇器（Attribute Selector）
   屬性選擇器可根據元素的屬性選擇元素進行樣式化。例如，要將所有具有"title"屬性的圖片的邊框顏色設為綠色，可以使用以下程式碼：

img[title] {
    border: 1px solid green;
}

6. 子選擇器（Child Selector）
   子選擇器可用於選擇某個元素的直接子元素。例如，要選擇所有清單（
   ）中的直接子項目（
   • ），並將它們的背景顏色設為藍色，可以使用下列程式碼：

ul > li {
    background-color: blue;
}

7. 否定選擇器（Negation Selector）
   否定選擇器可從一組元素中移除指定的元素進行樣式化。例如，要選擇除了具有"class1"類別的所有元素以外的元素，並將它們的文字顏色設為灰色，可以使用以下程式碼：

:not(.class1) {
    color: gray;
}

以上介紹了一些常用的CSS3選擇器，它們能夠幫助我們更精確地選擇和樣式化HTML元素。透過靈活應用這些選擇器，我們可以輕鬆實現網頁設計的各種效果。

以上是常見的CSS3選擇器有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！