當(dāng)前位置：首頁(yè) >

014_CSS伪类选择器

發(fā)布時(shí)間：2025/4/17 70 豆豆

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

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

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

3. 偽類的語(yǔ)法:

selector : pseudo-class {property: value; }

4. 錨偽類

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

/* 未訪問的鏈接 */ a:link {color: #FF0000; } /* 已訪問的鏈接 */ a:visited {color: #00FF00; } /* 鼠標(biāo)移動(dòng)到鏈接上 */ 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. 偽類名稱對(duì)大小寫不敏感。

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">這是一個(gè)鏈接。</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偽類來選擇做為某元素的第一個(gè)子元素(必須是第一個(gè)子元素)的元素。

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

<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. 在上面的例子中, 作為第一個(gè)元素的元素包括第一個(gè)p、第一個(gè)li和em和i元素。

5.2.2. 給定以下規(guī)則:

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

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

5.3. 最常見的錯(cuò)誤是認(rèn)為p:first-child之類的選擇器會(huì)選擇p元素的第一個(gè)子元素。

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選擇器匹配屬于其父元素的最后一個(gè)子元素(必須是最后一個(gè)子元素)的元素。

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個(gè)子元素(必須是第n個(gè)子元素)的元素, 不論元素的類型。

7.2. n可以是數(shù)字、關(guān)鍵詞或公式。

7.3. odd和even是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞(第一個(gè)子元素的下標(biāo)是: 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>第一個(gè)段落。</p><p>第二個(gè)段落。</p><p>第三個(gè)段落。</p><p>第四個(gè)段落。</p><p>第五個(gè)段落。</p></body> </html>

7.4.2.?效果圖

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

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

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>第一個(gè)段落。</p><p>第二個(gè)段落。</p><p>第三個(gè)段落。</p><p>第四個(gè)段落。</p><p>第五個(gè)段落。</p></body> </html>

8.2.2.?效果圖

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

9.1. :nth-of-type(n)選擇屬于父元素的特定類型的第n個(gè)子元素(按照類型匹配, 不一定是父元素的第n個(gè)元素, 可能大于等于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>第一個(gè)段落。</p><b>第二個(gè)段落, 但是p給換成了b。</b><p>第三個(gè)段落。</p><p>第四個(gè)段落。</p><p>第五個(gè)段落。</p></body> </html>

9.2.2.?效果圖

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

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

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>第一個(gè)段落。</p><p>第二個(gè)段落。</p><p>第三個(gè)段落。</p><b>第四個(gè)段落, 但是p給換成了b。</b><p>第五個(gè)段落。</p></body> </html>

10.2.2.?效果圖

11. :first-of-type偽類

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

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>第一個(gè)段落, 但是p給換成了b。</b><p>第二個(gè)段落。</p><p>第三個(gè)段落。</p><p>第四個(gè)段落。</p><p>第五個(gè)段落。</p></body> </html>

11.2.2.?效果圖

12. :last-of-type偽類

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

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>第一個(gè)段落。</p><p>第二個(gè)段落。</p><p>第三個(gè)段落。</p><p>第四個(gè)段落。</p><b>第五個(gè)段落, 但是p給換成了b。</b></body> </html>

12.2.2.?效果圖

13. :only-child偽類

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

14. :only-of-type偽類

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

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只有一個(gè)p元素, p:only-child和p:only-of-type都起作用。<p>第一個(gè)段落。</p></body> </html>

14.2.2.?效果圖

15. :lang(en)偽類

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

15.2. 例子

15.2.1. 代碼

<!DOCTYPE html> <html><head><title>:lang 偽類</title><meta charset="utf-8" /><style type="text/css">/*quotes屬性設(shè)置嵌套引用(embedded quotation)的引號(hào)類型。*/q:lang(zh) {quotes: '"' '"';}q:lang(en) {quotes: '"' '"' "'" "'";}</style></head><body><p>文字開始<q lang="zh">段落中的引用的文字</q>文字結(jié)束</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選擇器用于選取獲得焦點(diǎn)的元素。

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>在文本框中點(diǎn)擊, 您會(huì)看到黃色的背景:</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選擇器匹配沒有子元素(包括文本節(jié)點(diǎn), 也就是說該元素既沒有子元素也不能包含文本)的元素。

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>第一個(gè)段落。</p><p>第二個(gè)段落。</p><p>第三個(gè)段落。</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">第一個(gè)段落。</p><p>第二個(gè)段落。</p><p>第三個(gè)段落。</p><p class="myP">第四個(gè)段落。</p></body> </html>

19.2.2.?效果圖

20. :target偽類

20.1. :target選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素。

20.2. URL帶有后面跟有錨名稱, 指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(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>點(diǎn)擊下面的鏈接, :target選擇器會(huì)突出顯示當(dāng)前活動(dòng)的html錨。</h1><p><a href = "#news1">跳轉(zhuǎn)至內(nèi)容 1</a></p><p><a href = "#news2">跳轉(zhuǎn)至內(nèi)容 2</a></p><p id = "news1"><b>內(nèi)容 1...</b></p><p id = "news2"><b>內(nèi)容 2...</b></p><p><b>注釋: </b>Internet Explorer 8以及更早的版本不支持:target選擇器。</p></body> </html>

20.3.2.?效果圖

21. enabled和disabled偽類

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

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

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. 偽類列表

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

014_CSS伪类选择器

總結(jié)