常見的CSS選擇器分類及具體代碼示例
CSS選擇器是用來選擇HTML文檔的元素并給予其特定樣式的工具。掌握不同類型的CSS選擇器對于編寫高效的CSS樣式表至關重要。下面是常見的CSS選擇器分類以及具體的代碼示例。
- 元素選擇器（Element Selector）
元素選擇器是最常見的CSS選擇器。它通過選擇HTML元素的標簽名稱來選取元素。例如，選擇所有的段落元素可以用以下樣式：
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;
}
登錄后復制
以上是常見的CSS選擇器分類及其示例代碼。了解不同類型的選擇器以及它們的用法，將有助于您在編寫CSS樣式表時更具靈活性和精確性。記住，選擇器的組合和嵌套也可以與使用CSS選擇器進行更具體的元素選擇和樣式定義。
