當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

014_CSS伪类选择器

發布時間：2025/4/17 CSS 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 014_CSS伪类选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 偽類選擇器是通過單冒號(:)和特定的具有某種含義的單詞來確定所選元素。

2. 所謂偽類選擇器, 是相對于"類選擇器"來說的。偽類選擇器類似于添加類, 所以可以是多個。

3. 偽類的語法:

selector : pseudo-class {property: value; }

4. 錨偽類

4.1. 在支持CSS的瀏覽器中, 鏈接的不同狀態可以使用不同的方式顯示, 這些狀態包括: 活動狀態(按下鼠標, 可以一直按下鼠標), 已被訪問狀態, 未被訪問狀態和鼠標懸停狀態。

/* 未訪問的鏈接 */ a:link {color: #FF0000; } /* 已訪問的鏈接 */ a:visited {color: #00FF00; } /* 鼠標移動到鏈接上 */ a:hover {color: #FF00FF; } /* 選定的鏈接 */ a:active {color: #0000FF; }

4.2. 在CSS定義中, a:hover必須被置于a:link和a:visited之后, 才是有效的。

4.3. 在CSS定義中, a:active必須被置于a:hover之后, 才是有效的。

4.4. 偽類名稱對大小寫不敏感。

4.5. 例子

4.5.1.?代碼

<!DOCTYPE html> <html><head><title>錨偽類</title><meta charset="utf-8" /><style type="text/css">a:link {color: #FF0000;}a:visited {color: #00FF00;}a:hover {color: #FF00FF;}a:active {color: #0000FF;}</style></head><body><p><b><a href="http://www.baidu.com" target="_blank">這是一個鏈接。</a></b></p><p><b>注釋：</b>在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！</p><p><b>注釋：</b>在 CSS 定義中，a:active 必須位于 a:hover 之后，這樣才能生效！</p></body> </html>

4.5.2.?效果圖

5. :first-child偽類

5.1. :first-child偽類來選擇做為某元素的第一個子元素(必須是第一個子元素)的元素。

5.2. 這個特定偽類很容易遭到誤解, 所以有必要舉例來說明。考慮以下標記:

<div><p>These are the necessary steps:</p><ul><li>Intert Key</li><li>Turn key <em>clockwise</em></li><li>Push accelerator</li></ul><p>Do <i>not</i> push the brake at the same time as the accelerator.</p> </div>

5.2.1. 在上面的例子中, 作為第一個元素的元素包括第一個p、第一個li和em和i元素。

5.2.2. 給定以下規則:

p:first-child {font-weight: bold; } li:first-child {text-transform: uppercase; }

5.2.3. 第一個規則將作為某元素第一個子元素的所有p元素設置為粗體。第二個規則將作為某個元素(在html中, 這肯定是ol或ul元素)第一個子元素的所有li元素變成大寫。

5.3. 最常見的錯誤是認為p:first-child之類的選擇器會選擇p元素的第一個子元素。

5.4. 必須聲明, 這樣:first-child才能在IE中生效。

5.5. 例子

5.5.1.?代碼

<!DOCTYPE html> <html><head><title>first-child偽類</title><meta charset="utf-8" /><style type="text/css">p:first-child {font-weight: bold;}li:first-child {text-transform: uppercase;}</style></head><body><div><p>These are the necessary steps:</p><ul><li>Intert Key</li><li>Turn key <em>clockwise</em></li><li>Push accelerator</li></ul><p>Do <i>not</i> push the brake at the same time as the accelerator.</p></div></body> </html>

5.5.2.?效果圖

6. :last-child偽類

6.1. :last-child選擇器匹配屬于其父元素的最后一個子元素(必須是最后一個子元素)的元素。

6.2. 例子

6.2.1. 代碼

<!DOCTYPE html> <html><head><title>last-child偽類</title><meta charset="utf-8" /><style type="text/css">p:last-child {font-weight: bold;}li:last-child {text-transform: uppercase;}</style></head><body><div><p>These are the necessary steps:</p><ul><li>Intert Key</li><li>Turn key <em>clockwise</em></li><li>Push accelerator</li></ul><p>Do <i>not</i> push the brake at the same time as the accelerator.</p></div></body> </html>

6.2.2.?效果圖

7. :nth-child(n)偽類

7.1. :nth-child(n)選擇器匹配屬于其父元素的第n個子元素(必須是第n個子元素)的元素, 不論元素的類型。

7.2. n可以是數字、關鍵詞或公式。

7.3. odd和even是可用于匹配下標是奇數或偶數的子元素的關鍵詞(第一個子元素的下標是: 1)。

7.4. 例子

7.4.1. 代碼

<!DOCTYPE html> <html><head><title>nth-child偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-child(odd) {background: #ff0000;}p:nth-child(even) {background: #0000ff;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>

7.4.2.?效果圖

8. :nth-last-child(n)偽類

8.1. :nth-last-child(n)選擇器匹配屬于其父元素的第n個子元素(必須是第n個子元素)的元素, 不論元素的類型, 從最后一個子元素開始計數。

8.2. 例子

8.2.1. 代碼

<!DOCTYPE html> <html><head><title>nth-last-child偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-last-child(5) {background: #0000ff;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>

8.2.2.?效果圖

9. :nth-of-type(n)偽類

9.1. :nth-of-type(n)選擇屬于父元素的特定類型的第n個子元素(按照類型匹配, 不一定是父元素的第n個元素, 可能大于等于n)的元素。

9.2. 例子

9.2.1. 代碼

<!DOCTYPE html> <html><head><title>nth-of-type偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-child(2) {color: #ffff00;}p:nth-of-type(2) {background: #ff0000;}</style></head><body><p>第一個段落。</p><b>第二個段落, 但是p給換成了b。</b><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>

9.2.2.?效果圖

10. nth-last-of-type(n)偽類

10.1. nth-last-of-type(n)選擇屬于父元素的特定類型的第n個子元素(按照類型匹配, 不一定是父元素的第n個元素, 可能大于等于n)的元素, 從最后一個子元素開始計數。

10.2. 例子

10.2.1. 代碼

<!DOCTYPE html> <html><head><title>nth-last-of-type偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-last-of-type(2) {background: #ff0000;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><b>第四個段落, 但是p給換成了b。</b><p>第五個段落。</p></body> </html>

10.2.2.?效果圖

11. :first-of-type偽類

11.1. :first-of-type選擇屬于其父元素的特定類型的首個子元素(按照類型匹配, 不一定是父元素的第一個元素)的元素。

11.2. 例子

11.2.1. 代碼

<!DOCTYPE html> <html><head><title>first-of-type偽類</title><meta charset="utf-8" /><style type="text/css">p:first-child {color: #ffff00;}p:first-of-type {background: #ff0000;}</style></head><body><b>第一個段落, 但是p給換成了b。</b><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>

11.2.2.?效果圖

12. :last-of-type偽類

12.1. :last-of-type選擇屬于其父元素的特定類型的最后一個子元素(按照類型匹配, 不一定是父元素的第最后一個元素)的元素。

12.2. 例子

12.2.1. 代碼

<!DOCTYPE html> <html><head><title>last-of-type偽類</title><meta charset="utf-8" /><style type="text/css">p:last-child {color: #ffff00;}p:last-of-type {background: #ff0000;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><b>第五個段落, 但是p給換成了b。</b></body> </html>

12.2.2.?效果圖

13. :only-child偽類

13.1. only-child選擇屬于其父元素的唯一子元素的元素(父元素只能有一個元素)。

14. :only-of-type偽類

14.1. only-of-type選擇屬于其父元素的特定類型的唯一子元素的元素(父元素可以有多個元素, 但是該類型只能有一個)。

14.2. 例子

14.2.1. 代碼

<!DOCTYPE html> <html><head><title>only-child和only-of-type偽類</title><meta charset="utf-8" /><style type="text/css">p:only-child {color: #ffff00;}p:only-of-type {background: #ff0000;}</style></head><body>body只有一個p元素, p:only-child和p:only-of-type都起作用。<p>第一個段落。</p></body> </html>

14.2.2.?效果圖

15. :lang(en)偽類

15.1. :lang(en)偽類使你有能力為不同的語言定義特殊的規則。

15.2. 例子

15.2.1. 代碼

<!DOCTYPE html> <html><head><title>:lang 偽類</title><meta charset="utf-8" /><style type="text/css">/*quotes屬性設置嵌套引用(embedded quotation)的引號類型。*/q:lang(zh) {quotes: '"' '"';}q:lang(en) {quotes: '"' '"' "'" "'";}</style></head><body><p>文字開始<q lang="zh">段落中的引用的文字</q>文字結束</p><p><q lang="en">This is a <q lang="en">big</q> quote</q></p></body> </html>

15.2.2.?效果圖

16. :focus偽類

16.1. :focus選擇器用于選取獲得焦點的元素。

16.2. 例子

16.2.1. 代碼

<!DOCTYPE html> <html><head><title>focus偽類</title><meta charset="utf-8" /><style type="text/css">input:focus {background-color: yellow;}</style></head><body><p>在文本框中點擊, 您會看到黃色的背景:</p><form>First name: <input type="text" name="firstname" /><br>Last name: <input type="text" name="lastname" /></form></body> </html>

16.2.2.?效果圖

17. :root偽類

17.1. :root選擇器匹配文檔根元素。

17.2. 在html中, 根元素始終是html元素。

18. :empty偽類

18.1. :empty選擇器匹配沒有子元素(包括文本節點, 也就是說該元素既沒有子元素也不能包含文本)的元素。

18.2. 例子

18.2.1. 代碼

<!DOCTYPE html> <html><head><title>root和empty偽類</title><meta charset="utf-8" /><style type="text/css">:root {color: #ff00ff;}p {width: 300px;height: 30px;}p:empty {background-color: #ff0000;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p></p></body> </html>

18.2.2.?效果圖

19. :not偽類

19.1. :not(selector)選擇器匹配非指定元素/選擇器的元素。

19.2. 例子

19.2.1. 代碼

<!DOCTYPE html> <html><head><title>not偽類</title><meta charset="utf-8" /><style type="text/css">p {color: #ff0000;}:not(.myP) {color: #ff00ff;}</style></head><body><p class="myP">第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p class="myP">第四個段落。</p></body> </html>

19.2.2.?效果圖

20. :target偽類

20.1. :target選擇器可用于選取當前活動的目標元素。

20.2. URL帶有后面跟有錨名稱, 指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。

20.3. 例子

20.3.1. 代碼

<!DOCTYPE html> <html><head><title>target偽類</title><meta charset="utf-8" /><style type="text/css">#news1, #news2 {width: 300px;height: 200px;}:target {border: 2px solid #D4D4D4;background-color: #e5eecc;}</style></head><body><h1>點擊下面的鏈接, :target選擇器會突出顯示當前活動的html錨。</h1><p><a href = "#news1">跳轉至內容 1</a></p><p><a href = "#news2">跳轉至內容 2</a></p><p id = "news1"><b>內容 1...</b></p><p id = "news2"><b>內容 2...</b></p><p><b>注釋: </b>Internet Explorer 8以及更早的版本不支持:target選擇器。</p></body> </html>

20.3.2.?效果圖

21. enabled和disabled偽類

21.1. :enabled選擇器匹配每個已啟用的元素(大多用在表單元素上)。

21.2. :disabled選擇器匹配每個被禁用的元素(大多用在表單元素上)。

21.3. 例子

21.3.1. 代碼

<!DOCTYPE html> <html><head><title>enabled和disabled偽類</title><meta charset="utf-8" /><style type="text/css">input[type="text"]:enabled {background-color: #ffff00;}input[type="text"]:disabled {background-color: #ff0000;}</style></head><body><form>First name: <input type="text" value="zhang" /><br>Last name: <input type="text" value="san" /><br>Country: <input type="text" disabled="disabled" value="China" /><br></form></body> </html>

21.3.2.?效果圖

22. 偽類列表

總結

以上是生活随笔為你收集整理的014_CSS伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。