CSS選擇器詳解

CSS選擇器是CSS（層疊樣式表）中用于匹配HTML元素的關鍵工具，通過CSS選擇器，我們可以***地選擇需要應用樣式的HTML元素，下面我們將詳細介紹CSS選擇器的種類和使用方法。

1. 基本選擇器

1.1 元素選擇器

元素選擇器是***基本的選擇器，它根據(jù)HTML元素的標簽名選擇元素。div,p,span等。

div {
  color: blue;
}

1.2 類選擇器

類選擇器通過類屬性選擇HTML元素。.myClass。

.myClass {
  color: red;
}

1.3 ID選擇器

ID選擇器通過元素的ID屬性選擇HTML元素。#myID。

#myID {
  color: green;
}

2. 復合選擇器

復合選擇器可以將多種選擇器組合在一起，以便更***地選擇元素。

2.1 后代選擇器（descendant selector）

后代選擇器可以選擇某個元素的所有后代元素。div p 選擇所有在div元素內部的p元素。

div p {
  color: orange;
}

2.2 子元素選擇器（child selector）

子元素選擇器可以選擇某個元素的直接子元素。div > p 選擇所有div元素的直接子元素p。

div > p {
  color: purple;
}

2.3 相鄰兄弟選擇器（adjacent sibling selector）

相鄰兄弟選擇器可以選擇某個元素的下一個兄弟元素。div + p 選擇所有緊跟在div元素之后的p元素。

div + p {
  color: brown;
}

3. 偽類選擇器

偽類選擇器用于選擇HTML元素的特定狀態(tài)或位置。

3.1 鏈接偽類（link pseudo-class）

鏈接偽類用于選擇未訪問、正在訪問和已訪問的鏈接。a:link,a:visited,a:active,a:hover。

a:link { color: blue; } /* 未訪問的鏈接 */
a:visited { color: red; } /* 已訪問的鏈接 */
a:active { color: green; } /* 正在訪問的鏈接 */
a:hover { color: orange; } /* 鼠標懸停時的鏈接 */

3.2 偽類選擇器的其他應用

除了鏈接偽類，CSS還提供了其他多種偽類選擇器，如:first-child,:last-child,:nth-child(n),:root,:lang,:checked,:disabled,:valid,:invalid等，可以滿足更豐富的選擇需求。

4. 偽元素選擇器

偽元素選擇器用于選擇HTML元素的特定部分。::before,::after,::first-letter,::first-line,::selection等。

4.1::before 和::after 偽元素

這兩個偽元素可以在元素的內容前后插入內容或樣式。

div::before { content: "Before "; } /* 在div內容前插入文本 */
div::after { content: " After"; } /* 在div內容后插入文本 */

CSS選擇器提供了豐富的選擇HTML元素的方法，包括基本選擇器、復合選擇器、偽類選擇器和偽元素選擇器，通過熟練掌握這些選擇器，可以靈活應用樣式到HTML文檔的各個部分。