CSS中的偽級是什麼？給出示例（例如：懸停，：活動，：焦點，：訪問，：第一個孩子，：last-Child）。-css教學-PHP中文網

CSS中的偽級是什麼？給出示例（例如：懸停，：活動，：焦點，：訪問，：第一個孩子，：last-Child）。

Mar 19, 2025 pm 01:03 PM

CSS中的偽級是關鍵字，可讓您不僅可以根據其內容或屬性來對元素進行造型，而且還可以在文檔中的狀態或位置上進行樣式。它們用於定義元素的特殊狀態，可用於增強用戶交互性和佈局自定義。以下是常用偽級的一些示例：

：HOVER ：當用戶使用鼠標光標徘徊在元素上時，應用樣式。示例用法：
```
 <code class="css">button:hover { background-color: #ccc; }</code>
```
：活動：激活元素時應用樣式（例如，用戶單擊）。示例用法：
```
 <code class="css">button:active { background-color: #aaa; }</code>
```
：focus ：應用樣式時，通常通過鍵盤導航或單擊接收到焦點時。示例用法：
```
 <code class="css">input:focus { border-color: blue; }</code>
```
：訪問：將樣式應用於用戶訪問的鏈接。示例用法：
```
 <code class="css">a:visited { color: purple; }</code>
```
：第一孩子：將樣式應用於其父母的第一個孩子。示例用法：
```
 <code class="css">ul li:first-child { font-weight: bold; }</code>
```
：Last-Child ：將樣式應用於其父母的最後一個孩子。示例用法：
```
 <code class="css">ul li:last-child { color: red; }</code>
```

這些偽級通過允許開發人員根據用戶交互和文檔結構來操縱元素的外觀來幫助創建更動態和響應的用戶界面。

偽級可以通過幾種方式在網站上顯著增強用戶互動：

改進的導航和可用性：偽級，例如:hover and :focus可以向用戶提供視覺反饋，表明諸如按鈕或鏈接之類的交互式元素。例如，當用戶徘徊在按鈕上時，更改顏色或添加邊框有助於單擊它，從而改善用戶體驗。
增強的可訪問性：： :focus偽級可用於突出顯示當前的集中元素，這對於鍵盤用戶和使用輔助技術的用戶尤為重要。這可以幫助用戶更有效地瀏覽網站。
動態內容顯示：使用偽級，例如:first-child ， :last-child和其他人，開發人員可以根據文檔中的位置進行樣式元素，從而創建更有條理和具有視覺上吸引人的佈局。這可以幫助引起人們對關鍵內容的注意，或者為顯示的信息提供更好的上下文。
用戶操作的反饋：the :active Pseudo-Class可以在用戶交互期間（例如在單擊按鈕時）提供立即反饋。這可以強化已經開始採取行動，從而增強了網站的互動感覺。
基於用戶歷史記錄的自定義樣式：： :visited偽級允許開發人員根據用戶以前訪問過的鏈接以不同的方式樣式鏈接，這可以幫助用戶記住他們去過的位置並更有效地導航。

總體而言，偽級通過利用不同的狀態和元素位置來創建一個更具互動，響應式和用戶友好的網站。

:hover和:active偽級都用於基於用戶互動樣式元素，但它們適用於不同的交互狀態，用於不同的目的：

：懸停：
- 當用戶將鼠標光標放在元素上而無需單擊時，觸發。
- 通常用於向用戶提供視覺反饋，即元素是交互式的。
- 只要光標超過元素，效果就保持活躍。
- 示例用法：
```
 <code class="css">a:hover { color: #ff0000; }</code>
```
：積極的：
- 當元素被激活時觸發，通常通過按下鼠標按鈕，但尚未釋放。
- 用於指示當前正在執行的操作，例如單擊按鈕或鏈接。
- 效果僅在用戶按下和釋放鼠標按鈕之間的短暫瞬間。
- 示例用法：
```
 <code class="css">button:active { background-color: #0000ff; }</code>
```

儘管兩個偽級都可以一起使用以創建更詳細的交互體驗， :hover提供了有關潛在互動的反饋，而:active表示當前正在進行操作。例如，懸停在鼠標上時，您可能會看到一個按鈕更改顏色，然後在釋放鼠標按鈕之前單擊它時進一步變暗。

偽級可以根據其在列表中的位置有效地用於樣式元素，從而根據其序數放置為某些元素提供獨特的樣式。您可以為此目的使用一些常見的偽級：

：第一兒童：將樣式應用於列表中的第一個元素。
```
 <code class="css">ul li:first-child { background-color: yellow; }</code>
```
這將使第一個列表項目黃色的背景。
：Last-Child ：將樣式應用於列表中的最後一個元素。
```
 <code class="css">ul li:last-child { color: blue; }</code>
```
這將將最後一個列表項目的文本顏色更改為藍色。
：nth-child（n） ：將樣式應用於列表中特定位置的元素。 n可以是一個數字，公式或關鍵字。
- 為第三項設計樣式：
```
 <code class="css">ul li:nth-child(3) { font-weight: bold; }</code>
```
- 從第二個開始樣式的其他所有項目：
```
 <code class="css">ul li:nth-child(2n) { background-color: #eee; }</code>
```
- 為前三個項目造型：
```
 <code class="css">ul li:nth-child(-n 3) { font-style: italic; }</code>
```
：nth-last-child（n） ：類似於:nth-child ，但從列表中的最後一個元素計數。
- 為二次到二次的項目設計：
```
 <code class="css">ul li:nth-last-child(2) { border: 1px solid red; }</code>
```