自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解CSS Pseudo-classes(偽類 )

作者：前端進(jìn)階者
開(kāi)發(fā) 前端
本文基于CSS基礎(chǔ)，介紹了CSS中的偽類，從什么是偽類，常見(jiàn)的偽類的用法（ first-child，: last-seudo，: nth-child，: lang）最后介紹了偽類可以與CSS類結(jié)合使用。通過(guò)項(xiàng)目的分析，代碼的展示 ，能夠讓讀者直觀的理解偽類的含義。

[[375167]]

CSS偽類選擇器根據(jù)其他條件匹配組件，而不一定由文檔樹(shù)定義。CSS 偽類 是添加到選擇器的關(guān)鍵字，指定要選擇的元素的特殊狀態(tài)。

一、什么是偽類?

CSS偽類允許設(shè)置元素的動(dòng)態(tài)狀態(tài)的樣式，例如懸停，活動(dòng)狀態(tài)和焦點(diǎn)狀態(tài)，以及文檔樹(shù)中現(xiàn)有但不能通過(guò)使用其他選擇器作為目標(biāo)的元素，而無(wú)需添加任何選擇器它們的ID或類。

例如，針對(duì)第一個(gè)或最后一個(gè)子元素。

偽類以冒號(hào)(:)開(kāi)頭。

語(yǔ)法

  1. /*選擇器：偽類{ 屬性：值 ; }*/ 

二、最常用的偽類

錨偽類

使用 錨 偽類鏈接可以以不同的方式顯示。

這些偽類使可以對(duì)未訪問(wèn)的鏈接進(jìn)行樣式化，而對(duì)訪問(wèn)的鏈接進(jìn)行樣式化。最常見(jiàn)的樣式設(shè)置技術(shù)是從訪問(wèn)的鏈接中刪除下劃線。

例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>錨偽類的示例</title> 
  6. <style> 
  7. a:link { 
  8. color: blue 
  9. } 
  10.  
  11. a:visited { 
  12. text-decoration: none; 
  13. } 
  14. </style> 
  15. </head> 
  16. <body style="background-color: aqua;"> 
  17. <p>Visit  
  18.      <a href="https://www.baidu.com" target="_blank">www.baidu.com</a></p> 
  19. </body> 
  20. </html> 

一些錨點(diǎn)偽類是動(dòng)態(tài)的，是由于用戶與文檔進(jìn)行交互(例如懸?；蚓劢沟?而應(yīng)用的。

例

  1. <style> 
  2. a:hover { 
  3. color: red; 
  4. } 
  5.  
  6. a:active { 
  7. color: gray; 
  8. } 
  9.  
  10. a:focus { 
  11. color: yellow; 
  12. } 
  13. </style> 

這些偽類更改了響應(yīng)用戶操作呈現(xiàn)鏈接的方式。

  •  hover 當(dāng)可被用于在用戶將鼠標(biāo)懸停在按鈕上時(shí)改變按鈕的顏色用。
  •  active 當(dāng)元素被激活或單擊時(shí)適用。
  •  focus 當(dāng)元素具有鍵盤焦點(diǎn)時(shí)適用。

注：為了使這些偽類很好地工作，必須按正確的順序?qū)⑺鼈兌x - :link, :visited, :hover, :active, :focuss。

<1> : first-child偽類

first-child偽類匹配的是一些其他元素的第一個(gè)子元素的元素。ol li:first-child在下面的示例中，選擇器選擇一個(gè)有序列表的第一個(gè)列表項(xiàng)，并從其頂部刪除邊框。

  1. <style> 
  2. ol { 
  3. padding: 0; 
  4. list-style: none; 
  5. } 
  6.  
  7. ol li { 
  8. padding: 10px 0; 
  9. border-top: 1px solid #000000; 
  10. } 
  11.  
  12. li:first-child { 
  13. border-top: none; 
  14. } 
  15. </style> 

注意：

要 :first-child在Internet Explorer 8和更早版本中工作，必須在文檔頂部聲明a 。

<2> : last-seudo偽類

last-child偽類匹配的是一些其他元素的最后一個(gè)子元素的元素。ul li:last-child例中的選擇器從無(wú)序列表中選擇最后一個(gè)列表項(xiàng)，并從其中刪除右邊框。

  1. <style> 
  2.    ul{ 
  3.        padding: 0; 
  4.        list-style: none;           
  5.   } 
  6.    ul li{ 
  7.        display: inline; 
  8.        padding: 0 20px; 
  9.        border-right: 1px solid #000000; 
  10.   } 
  11.    li:last-child { 
  12.        border-right: none; 
  13.   } 
  14. </style> 

注意：

CSS :last-child選擇器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。

<3> : nth-child偽類

CSS3引入了一個(gè)新的:nth-child偽類，使可以將給定父元素的一個(gè)或多個(gè)特定子對(duì)象作為目標(biāo)。

此選擇的基本語(yǔ)法可以與給予:nth-child(N)，其中N是一個(gè)參數(shù)，其可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字(even或odd)，或形式的表達(dá)xn+y，其中x和y是整數(shù)(例如1n，2n，2n+1，...)。

例

  1. <style> 
  2. table { 
  3. margin: 30px; 
  4. border-collapse: collapse; 
  5. } 
  6.  
  7. table tr { 
  8. border-bottom: 1px solid #666; 
  9. } 
  10.  
  11. table tr th, 
  12. table tr td { 
  13. padding: 10px; 
  14. } 
  15.  
  16. table tr:nth-child(2n) td { 
  17. background: #f2f2f2; 
  18. } 
  19. </style> 
  20. /*上面示例中的樣式規(guī)則僅突出顯示了代替表行，而沒(méi)有向元素添加任何ID或類。*/ 

提示：

CSS :nth-child(N)選擇器在必須選擇以特定間隔或模式(例如在偶數(shù)或奇數(shù)位置等)出現(xiàn)在文檔樹(shù)內(nèi)的元素的情況下非常有用。

<4> : lang偽類

語(yǔ)言偽類:lang允許根據(jù)特定標(biāo)記的語(yǔ)言設(shè)置來(lái)構(gòu)造選擇器。

lang以下示例中的偽類為明確賦予語(yǔ)言值的元素定義了引號(hào)no。

例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>CSS：lang偽類示例</title> 
  6. <style> 
  7. q:lang(no) { 
  8. quotes: "~""~"; 
  9. } 
  10. </style> 
  11. </head> 
  12. <body style="background-color: aqua;"> 
  13. <p>某些文本<q lang=“ no”>段落中的引號(hào)</ q>一些文本。</ p> 
  14. <p><strong>Note:</strong>Internet Explorer 8和更早版本不支持 
  15. <code>：lang </ code>偽類。IE8僅在以下情況下支持 <code> 
  16.     </code> is specified.</p> 
  17. </body> 
  18. </html> 
  19. <!-- code snippet */Some text A quote in a paragraph Some text ></--HTML> 

注：

Internet Explorer 7更早版本不支持:lang偽類。IE8僅在指定a的情況下支持。

三、偽類和CSS類

偽類可以與CSS類結(jié)合使用。

在下面的示例中class="red"，帶有的鏈接將顯示為紅色。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>使用帶有選擇器的CSS偽類示例</title> 
  6. <style> 
  7. a.red:link { 
  8. color: #ff0000; 
  9. } 
  10. </style> 
  11. </head> 
  12. <body style="background-color: aqua;"> 
  13. <p> 
  14. <a href="#">Click me</a> 
  15. <br> 
  16. <a href="#" class="red">Click me</a> 
  17. </p> 
  18. </body> 
  19. </html> 

 

四、總結(jié)

本文基于CSS基礎(chǔ)，介紹了CSS中的偽類，從什么是偽類，常見(jiàn)的偽類的用法( first-child，: last-seudo，: nth-child，: lang)最后介紹了偽類可以與CSS類結(jié)合使用。通過(guò)項(xiàng)目的分析，代碼的展示 ，能夠讓讀者直觀的理解偽類的含義。

希望能夠幫助讀者更好的學(xué)習(xí)。

 

 

責(zé)任編輯：姜華 來(lái)源： 前端進(jìn)階學(xué)習(xí)交流
Css前端Pseudo-classes
相關(guān)推薦

2021-10-22 09:55:13

CSS偽類 樣式

2020-12-18 08:09:53

CSS偽元素基礎(chǔ)

2020-11-03 19:18:28

CSS對(duì)齊文本

2021-05-31 09:30:36

Css前端CSS 特效

2021-04-07 06:11:37

Css前端CSS定位知識(shí)

2021-01-25 05:39:54

Css前端Border

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平臺(tái)

2020-11-17 11:10:21

CSS選擇器HTML

2020-12-18 05:40:37

CSS clearHtml

2020-11-27 08:51:29

CSSOpacity透明度

2023-07-30 15:18:54

JavaScript屬性

2023-05-08 08:21:15

JavaNIO編程

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-06-24 09:05:08

JavaScript日期前端

2021-09-27 09:18:30

ListIterato接口方法

2023-09-06 14:57:46

JavaScript編程語(yǔ)言

2024-01-30 13:47:45

2024-04-19 14:23:52

SwitchJavaScript開(kāi)發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)