CSS選擇器是CSS中非常重要的部分，它可以幫助我們輕松地選中HTML文檔中的元素，以下是幾種常見的CSS選擇器及其用法：

1、元素選擇器：通過HTML元素的標(biāo)簽名來選中元素。div,p,span等。

2、類選擇器：通過類屬性來選中元素。.myClass,.anotherClass等。

3、ID選擇器：通過元素的ID來選中***的元素。#myID,#anotherID等。

4、屬性選擇器：通過元素的屬性及其值來選中元素。[type="text"],[href="https://html4.cn"]等。

5、偽類選擇器：用于選中處于特定狀態(tài)的元素，如鼠標(biāo)懸停、點(diǎn)擊等。:hover,:active,:focus等。

6、組合選擇器：可以組合使用上述選擇器來選中更復(fù)雜的元素集合。div.myClass,a[href^="https://"]等。

示例

假設(shè)我們有以下HTML文檔：

<div class="myClass">這是一個(gè)div元素</div>
<p id="myID">這是一個(gè)段落</p>
<a href="https://html4.cn">這是一個(gè)鏈接</a>
<input type="text" name="username">

我們可以通過以下CSS選擇器來選中這些元素：

元素選擇器：div,p,a,input

類選擇器：.myClass

ID選擇器：#myID

屬性選擇器：[href^="https://"],[type="text"]

偽類選擇器：:hover,:active,:focus

組合選擇器：div.myClass,a[href^="https://"]

偽類選擇器的使用

偽類選擇器用于選中處于特定狀態(tài)的元素，如鼠標(biāo)懸停、點(diǎn)擊等，以下是一些常見的偽類選擇器的用法：

:hover：鼠標(biāo)懸停在元素上時(shí)選中該元素。

:active：元素被點(diǎn)擊時(shí)選中該元素。

:focus：元素獲得焦點(diǎn)時(shí)選中該元素。

:visited：用戶訪問過該元素時(shí)選中該元素。

:first-child：元素是其父元素的***個(gè)子元素時(shí)選中該元素。

:last-child：元素是其父元素的***后一個(gè)子元素時(shí)選中該元素。

:nth-child(n)：元素是其父元素的第n個(gè)子元素時(shí)選中該元素。

:root：元素是文檔的根元素時(shí)選中該元素。

:lang(language)：元素的語言是language時(shí)選中該元素。

:checked：復(fù)選框或單選框被選中時(shí)選中該元素。

:disabled：表單元素被禁用時(shí)選中該元素。

:enabled：表單元素可用時(shí)選中該元素。

:valid：表單元素的值有效時(shí)選中該元素。

:invalid：表單元素的值無效時(shí)選中該元素。

:read-only：文本字段為只讀時(shí)選中該元素。

:not(selector)：不匹配給定選擇器的所有元素。

:root：文檔中的根元素。

:lang(language)：文檔的語言是language時(shí)選中該元素。

:checked：復(fù)選框或單選框被選中時(shí)選中該元素。

:disabled：表單元素被禁用時(shí)選中該元素。

:enabled：表單元素可用時(shí)選中該元素。

:valid：表單元素的值有效時(shí)選中該元素。

:invalid：表單元素的值無效時(shí)選中該元素。

:read-only：文本字段為只讀時(shí)選中該元素。