常見的CSS選擇器分類概述

常見的CSS選擇器分類及具體程式碼範例

CSS選擇器是用來選擇HTML文件的元素並給予其特定樣式的工具。掌握不同類型的CSS選擇器對於編寫高效能的CSS樣式表至關重要。下面是常見的CSS選擇器分類以及具體的程式碼範例。

1. 元素選擇器（Element Selector）
   元素選擇器是最常見的CSS選擇器。它透過選擇HTML元素的標籤名稱來選取元素。例如，選擇所有的段落元素可以用以下樣式：

p {
  color: blue;
}

2. 類別選擇器（Class Selector）
   類別選擇器透過為HTML元素新增class屬性，並使用點號來標識。它允許在文件中多個元素應用相同的樣式。範例如下：

.button {
  background-color: red;
}

在HTML中的使用方式：

<button class="button">Click me</button>

3. ID選擇器（ID Selector）
   ID選擇器透過為HTML元素新增id屬性，並使用井號來標示。它適用於只有一個元素需要套用特定樣式的情況。程式碼範例如下：

#header {
  background-color: yellow;
}

在HTML中的使用方式：

<header id="header">This is the header</header>

4. 子元素選擇器（Child Selector）
   子元素選擇器可以選擇某個元素的直接子元素。它使用大於號(>)來識別。下面的程式碼選擇所有段落元素的直接子元素span，並設定字體顏色為紅色：

p > span {
  color: red;
}

<p>This is a <span>red</span> text.</p>

5. 後代選擇器（Descendant Selector）
   後代選擇器可以選擇某個元素的所有後代元素。它使用空格來表示。以下程式碼選擇所有段落元素內部的span元素，並設定背景顏色為灰色：

p span {
  background-color: gray;
}

<p>This is a <span>gray</span> text.</p>

6. 相鄰兄弟選擇器（Adjacent Sibling Selector）
   鄰近兄弟選擇器可以選擇某個元素後面緊鄰的兄弟元素。它使用加號( )來標識。以下程式碼選擇所有h2元素後面緊鄰的p元素，並設定字體顏色為藍色：

h2 + p {
  color: blue;
}

<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>

7. 通用選擇器（Universal Selector）
   通用選擇器可以選擇HTML文檔中的所有元素。它使用星號(*)來表示。下面的程式碼選擇頁面中所有的元素，並設定邊框為1像素：

* {
  border: 1px solid black;
}

以上是常見的CSS選擇器分類及其範例程式碼。了解不同類型的選擇器以及它們的用法，將有助於您在編寫CSS樣式表時更具靈活性和精確性。記住，選擇器的組合和巢狀也可以與使用CSS選擇器進行更具體的元素選擇和樣式定義。

以上是常見的CSS選擇器分類概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！