CSS3作為CSS技術的升級版本，引入了許多新的特性，其中偽類選擇器的擴展是CSS3中非常重要的一部分。偽類選擇器允許開發者根據元素的狀態或位置來選擇元素，從而實現更加精細的樣式控制。本文將詳細介紹CSS3中新增的偽類選擇器，幫助開發者更好地理解和應用這些新特性。
在CSS中，偽類選擇器用于選擇元素的特定狀態或位置。偽類選擇器以冒號（:）開頭，通常與元素選擇器結合使用。例如，:hover偽類選擇器用于選擇鼠標懸停時的元素。
CSS3在CSS2.1的基礎上，新增了許多偽類選擇器，使得開發者能夠更加靈活地控制頁面的樣式。這些新增的偽類選擇器可以分為以下幾類：
接下來，我們將逐一介紹這些新增的偽類選擇器。
結構性偽類選擇器用于根據元素在文檔樹中的位置來選擇元素。CSS3新增的結構性偽類選擇器包括：
:nth-child(n):nth-child(n)偽類選擇器用于選擇父元素的第n個子元素。n可以是一個具體的數字，也可以是一個表達式（如2n表示偶數位置的子元素）。
/* 選擇父元素的第2個子元素 */
li:nth-child(2) {
color: red;
}
/* 選擇父元素的偶數位置的子元素 */
li:nth-child(2n) {
color: blue;
}
:nth-last-child(n):nth-last-child(n)偽類選擇器與:nth-child(n)類似，但它從最后一個子元素開始計數。
/* 選擇父元素的倒數第2個子元素 */
li:nth-last-child(2) {
color: green;
}
:nth-of-type(n):nth-of-type(n)偽類選擇器用于選擇父元素中特定類型的第n個子元素。
/* 選擇父元素中第2個<p>元素 */
p:nth-of-type(2) {
color: purple;
}
:nth-last-of-type(n):nth-last-of-type(n)偽類選擇器與:nth-of-type(n)類似，但它從最后一個子元素開始計數。
/* 選擇父元素中倒數第2個<p>元素 */
p:nth-last-of-type(2) {
color: orange;
}
:first-of-type 和 :last-of-type:first-of-type偽類選擇器用于選擇父元素中第一個特定類型的子元素，而:last-of-type用于選擇最后一個特定類型的子元素。
/* 選擇父元素中第一個<p>元素 */
p:first-of-type {
font-weight: bold;
}
/* 選擇父元素中最后一個<p>元素 */
p:last-of-type {
font-style: italic;
}
:only-child 和 :only-of-type:only-child偽類選擇器用于選擇父元素中唯一的子元素，而:only-of-type用于選擇父元素中唯一特定類型的子元素。
/* 選擇父元素中唯一的子元素 */
div:only-child {
background-color: yellow;
}
/* 選擇父元素中唯一的<p>元素 */
p:only-of-type {
background-color: pink;
}
:empty:empty偽類選擇器用于選擇沒有任何子元素的元素（包括文本節點）。
/* 選擇沒有任何子元素的<div>元素 */
div:empty {
border: 1px solid black;
}
狀態性偽類選擇器用于根據元素的狀態來選擇元素。CSS3新增的狀態性偽類選擇器包括：
:enabled 和 :disabled:enabled偽類選擇器用于選擇啟用的表單元素，而:disabled用于選擇禁用的表單元素。
/* 選擇啟用的輸入框 */
input:enabled {
background-color: white;
}
/* 選擇禁用的輸入框 */
input:disabled {
background-color: gray;
}
:checked:checked偽類選擇器用于選擇被選中的復選框或單選按鈕。
/* 選擇被選中的復選框 */
input[type="checkbox"]:checked {
border: 2px solid blue;
}
:indeterminate:indeterminate偽類選擇器用于選擇處于不確定狀態的復選框或單選按鈕（例如，復選框既未被選中也未被取消選中）。
/* 選擇處于不確定狀態的復選框 */
input[type="checkbox"]:indeterminate {
border: 2px solid orange;
}
:target:target偽類選擇器用于選擇當前URL的片段標識符所指向的元素。
/* 選擇當前URL片段標識符所指向的元素 */
:target {
background-color: yellow;
}
:focus:focus偽類選擇器用于選擇當前獲得焦點的元素。
/* 選擇獲得焦點的輸入框 */
input:focus {
border: 2px solid green;
}
:hover 和 :active:hover偽類選擇器用于選擇鼠標懸停時的元素，而:active用于選擇被激活的元素（例如，鼠標點擊時的按鈕）。
/* 選擇鼠標懸停時的按鈕 */
button:hover {
background-color: lightblue;
}
/* 選擇被激活的按鈕 */
button:active {
background-color: darkblue;
}
:visited 和 :link:visited偽類選擇器用于選擇已訪問過的鏈接，而:link用于選擇未訪問過的鏈接。
/* 選擇未訪問過的鏈接 */
a:link {
color: blue;
}
/* 選擇已訪問過的鏈接 */
a:visited {
color: purple;
}
CSS3新增了一些專門用于表單元素的偽類選擇器，使得開發者能夠更加靈活地控制表單的樣式。
:valid 和 :invalid:valid偽類選擇器用于選擇通過驗證的表單元素，而:invalid用于選擇未通過驗證的表單元素。
/* 選擇通過驗證的輸入框 */
input:valid {
border: 2px solid green;
}
/* 選擇未通過驗證的輸入框 */
input:invalid {
border: 2px solid red;
}
:required 和 :optional:required偽類選擇器用于選擇必填的表單元素，而:optional用于選擇可選的表單元素。
/* 選擇必填的輸入框 */
input:required {
border: 2px solid red;
}
/* 選擇可選的輸入框 */
input:optional {
border: 2px solid gray;
}
:in-range 和 :out-of-range:in-range偽類選擇器用于選擇值在指定范圍內的表單元素，而:out-of-range用于選擇值超出指定范圍的表單元素。
/* 選擇值在指定范圍內的輸入框 */
input:in-range {
border: 2px solid green;
}
/* 選擇值超出指定范圍的輸入框 */
input:out-of-range {
border: 2px solid red;
}
:read-only 和 :read-write:read-only偽類選擇器用于選擇只讀的表單元素，而:read-write用于選擇可讀寫的表單元素。
/* 選擇只讀的輸入框 */
input:read-only {
background-color: lightgray;
}
/* 選擇可讀寫的輸入框 */
input:read-write {
background-color: white;
}
除了上述幾類偽類選擇器外，CSS3還新增了一些其他偽類選擇器，用于處理一些特殊情況。
:not(selector):not(selector)偽類選擇器用于選擇不符合指定選擇器的元素。
/* 選擇不是<p>元素的所有元素 */
:not(p) {
color: blue;
}
:root:root偽類選擇器用于選擇文檔的根元素（通常是<html>元素）。
/* 選擇文檔的根元素 */
:root {
background-color: lightyellow;
}
:lang(language):lang(language)偽類選擇器用于選擇指定語言的元素。
/* 選擇語言為法語的元素 */
:lang(fr) {
font-style: italic;
}
:default:default偽類選擇器用于選擇表單元素的默認選項（例如，默認選中的單選按鈕或復選框）。
/* 選擇默認選中的單選按鈕 */
input[type="radio"]:default {
border: 2px solid green;
}
:dir(ltr|rtl):dir(ltr|rtl)偽類選擇器用于選擇具有指定文本方向的元素（從左到右或從右到左）。
/* 選擇文本方向為從右到左的元素 */
:dir(rtl) {
text-align: right;
}
CSS3新增的偽類選擇器為開發者提供了更加靈活和強大的樣式控制能力。通過使用這些偽類選擇器，開發者可以根據元素的狀態、位置、類型等條件來精確地選擇元素，從而實現更加復雜和精細的頁面樣式設計。
在實際開發中，合理使用這些偽類選擇器可以大大提高開發效率，減少不必要的JavaScript代碼。同時，這些偽類選擇器也為響應式設計和動態樣式控制提供了更多的可能性。
希望本文對您理解和應用CSS3新增的偽類選擇器有所幫助。在實際項目中，建議多嘗試和練習這些偽類選擇器，以便更好地掌握它們的用法和特性。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
