CSS 常見選擇器

CSS 常見選擇器

CSS（層疊樣式表）選擇器是用來指定頁面上的哪些元素需要被樣式化的一種方式。以下是一些常見的CSS選擇器及其用途：

1. 元素選擇器：直接使用HTML元素的名稱來選擇該元素。

   p { color: blue; } /* 選擇所有的<p>（段落）元素 */
   

2. 類選擇器：使用.（點）後跟類名來選擇具有特定類的元素。

   .my-class { background-color: yellow; } /* 選擇所有class為"my-class"的元素 */
   

3. ID選擇器：使用#後跟ID名來選擇具有特定ID的元素。

   #my-id { font-size: 20px; } /* 選擇ID為"my-id"的元素 */
   

4. 後代選擇器：選擇特定元素內部的後代元素。

   div p { color: green; } /* 選擇所有在<div>元素內的<p>元素 */
   

5. 子選擇器：選擇直接作為某個元素子元素的元素。

   div > p { color: red; } /* 選擇所有直接作為<div>元素子元素的<p>元素 */
   

6. 相鄰兄弟選擇器：選擇緊接在另一個元素後的兄弟元素。

   h2 + p { font-weight: bold; } /* 選擇緊跟在<h2>元素後的<p>元素 */
   

7. 通用兄弟選擇器：選擇某個元素之後的所有兄弟元素。

   h2 ~ p { color: orange; } /* 選擇所有在<h2>元素之後的所有<p>元素 */
   

8. 屬性選擇器：選擇具有特定屬性的元素。

   [href] { text-decoration: underline; } /* 選擇所有具有href屬性的元素 */
   

9. 偽類選擇器：選擇元素的特定狀態。

   a:hover { color: purple; } /* 選擇滑鼠懸停在<a>元素上時的狀態 */
   

10. 偽元素選擇器：選擇元素的特定部分。

    p::first-line { color: red; } /* 選擇每個<p>元素的第一行 */
    

11. 組合器：可以將上述選擇器組合使用，以建立更復雜的選擇模式。

    #header nav ul li a { color: white; } /* 組合選擇器，選擇特定結構的<a>元素 */
    

這些選擇器可以單獨使用，也可以組合使用來建立複雜的樣式規則。瞭解這些基礎選擇器是學習CSS佈局和樣式設計的重要一步。