常見的CSS選擇器分類及具體代碼示例

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

p {
  color: blue;
}

類選擇器（Class Selector）
類選擇器通過給HTML元素添加class屬性，并使用點號來標識。它允許在文檔中多個元素應用相同的樣式。例子如下：

.button {
  background-color: red;
}

在HTML中的使用方式：

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

ID選擇器（ID Selector）
ID選擇器通過給HTML元素添加id屬性，并使用井號來標識。它適用于只有一個元素需要應用特定樣式的情況。代碼示例如下：

#header {
  background-color: yellow;
}

在HTML中的使用方式：

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

子元素選擇器（Child Selector）
子元素選擇器可以選擇某個元素的直接子元素。它使用大于號(>)來標識。下面的代碼選擇所有段落元素的直接子元素span，并設置字體顏色為紅色：

p > span {
  color: red;
}

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

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

p span {
  background-color: gray;
}

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

相鄰兄弟選擇器（Adjacent Sibling Selector）
相鄰兄弟選擇器可以選擇某個元素后面緊鄰的兄弟元素。它使用加號(+)來標識。以下代碼選擇所有h2元素后面緊鄰的p元素，并設置字體顏色為藍色：

h2 + p {
  color: blue;
}

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

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

* {
  border: 1px solid black;
}