掌握基本的CSS選擇器語法,需要具體程式碼範例 CSS選擇器是前端開發中非常重要的一部分,它可以用來選擇和修改HTML文檔的各個元素。掌握基本的CSS選擇器語法對於編寫高效率的樣式表是至關重要的。本文將介紹一些常見的CSS選擇器以及對應的程式碼範例。 元素選擇器元素選擇器是最基本的選擇器,可以透過元素的標籤名稱來選擇對應的元素。例如,要選擇所有的段落(p元素),可以使用以下程式碼:p { color: blue; } 類別選擇器類別選擇器允許為HTML元素新增一個或多個類別名,並透過類別名稱來選擇對應的元素。類別名稱以.開頭。例如,為文字新增一個名為highlight的類別:.highlight { background-color: yellow; } #ID選擇器ID選擇器允許為HTML元素新增一個唯一的ID,並透過ID來選擇對應的元素。 ID名以#開頭。例如,給一個元素加入ID為header:#header { font-size: 24px; } #後位選擇器後位選擇器可以用來選擇特定元素的子代元素。它使用空格將兩個選擇器連在一起。例如,選擇所有#container下的p元素:#container p { color: red; } 子元素選擇器子元素選擇器可以選擇特定元素的直接子元素。它使用>來將兩個選擇器連接在一起。例如,選擇所有#navigation下的直接子元素li:#navigation > li { display: inline; } 偽類選擇器偽類選擇器允許選擇特定狀態的元素,例如,懸停狀態、存取狀態等。偽類選擇器以:開頭。例如,選擇懸停狀態下的連結:a:hover { text-decoration: underline; } 相鄰兄弟選擇器相鄰兄弟選擇器可以選擇緊接在另一個元素後面的元素。它使用 來將兩個選擇器連在一起。例如,選擇緊接在h1元素後的p元素:h1 + p { font-weight: bold; } 屬性選擇器屬性選擇器可以選擇帶有指定屬性的元素,可以根據屬性的值進行更精確的選擇。屬性選擇器使用方括號[]來指定屬性名稱和屬性值。例如,選擇所有帶有target=_blank的連結:a[target="_blank"] { color: pink; } #以上是一些常用的CSS選擇器,但這只是冰山一角。掌握更多的選擇器語法將幫助我們更好地操作HTML元素,並編寫出具有彈性和可維護性的樣式表。