本文目錄導讀：

1. 基本用法
2. 組合使用
3. 子代選擇器
4. 偽類選擇器

CSS3類選擇器詳解

CSS3類選擇器是CSS3中新增的一種選擇器類型，它允許我們根據元素的類屬性來選擇元素，在HTML中，我們可以通過class屬性給元素添加類，然后通過CSS3類選擇器來樣式化這些元素。

基本用法

CSS3類選擇器的使用非常簡單，只需要在CSS規(guī)則中使用點號（.）加上類名即可，如果我們有一個類名為"myClass"的元素，我們可以這樣來選擇它：

.myClass {
  color: red;
  font-size: 16px;
}

上述代碼會將類名為"myClass"的元素的文字顏色設置為紅色，字體大小設置為16像素。

組合使用

除了單獨使用類選擇器外，我們還可以將多個類選擇器組合在一起，以選擇具有多個類的元素，如果我們有兩個類"class1"和"class2"，我們可以這樣來選擇同時擁有這兩個類的元素：

.class1.class2 {
  background-color: blue;
  padding: 20px;
}

上述代碼會將同時擁有"class1"和"class2"類的元素的背景顏色設置為藍色，內邊距設置為20像素。

子代選擇器

CSS3類選擇器還可以與子代選擇器結合使用，以選擇特定元素的子代，如果我們有一個類名為"parent"的元素，我們想選擇它的所有子代元素，可以這樣寫：

.parent > * {
  border: 1px solid black;
}

上述代碼會給"parent"元素的所有子代元素添加邊框。

偽類選擇器

CSS3類選擇器還可以與偽類選擇器結合使用，以選擇處于特定狀態(tài)的元素，我們可以選擇所有懸停在元素上的鼠標：

.myElement:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

上述代碼會在鼠標懸停在"myElement"元素上時，給該元素添加陰影。

CSS3類選擇器提供了強大的功能來選擇HTML元素，無論是單獨使用還是與其他選擇器結合使用，都能滿足我們的需求，通過掌握CSS3類選擇器的使用方法，我們可以更加靈活地應用CSS樣式到HTML文檔中。