CSS（層疊樣式表）是用來編寫樣式來控制 HTML 文檔外觀的語言，包括網頁的字體、顏色、布局和其他視覺效果。除了控制單獨一個元素的樣式，還可以對整個頁面進行樣式控制。

在寫 CSS 樣式之前先要確定選擇器，選擇器可以選擇一個或多個頁面元素來設置樣式。最常見的選擇器是元素選擇器，例如 p、div、header 等。但是，如果想要控制除了某個元素以外的頁面元素，就需要用到其他類型的選擇器，如下所示：

/* 選擇器 */
:first-child	選擇第一個子元素
:last-child	選擇最后一個子元素
:not(selector)	選擇不匹配給定選擇器的元素
:nth-child(n)	選擇序號為 n 的子元素
:checked	選擇被勾選的元素（僅適用于表單元素）
:hover	鼠標懸停時選擇元素

:first-child 選擇器可以用來控制某個元素內的第一個子元素的樣式。例如，下面的代碼會將每個列表中的第一個 li 元素變成粗體字：

ul li:first-child {
font-weight: bold;
}

:last-child 選擇器可以用來控制某個元素內的最后一個子元素的樣式。例如，下面的代碼會將每個列表中的最后一個 li 元素的顏色變成紅色：

ul li:last-child {
color: red;
}

:not(selector) 選擇器可以用來排除某些元素。例如，下面的代碼會將除了第一張圖片之外的所有圖片設置為30%的不透明度：

img:not(:first-child) {
opacity: 0.3;
}

:nth-child(n) 選擇器可以用來選擇某個元素內的某個子元素。例如，下面的代碼會將每個列表中的第三個 li 元素變成藍色：

ul li:nth-child(3) {
color: blue;
}

:checked 選擇器可以用來選擇被選中的表單元素。例如，下面的代碼會將被選中的單選按鈕的背景色變成灰色：

input[type=radio]:checked {
background-color: gray;
}

:hover 選擇器可以用來控制鼠標懸停時的元素樣式。例如，下面的代碼會將鼠標懸停在鏈接上時，鏈接的文本顏色變成紅色：

a:hover {
color: red;
}

這些選擇器可用于根據頁面上元素的位置和狀態(tài)來設置 CSS 樣式，提供了更多具有針對性和靈活性的選擇器。了解這些選擇器的使用，可以幫助開發(fā)人員更好的控制頁面的樣式和布局，提高用戶體驗。