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

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

作者： 前端進階者
開發(fā) 前端
本文基于CSS基礎，介紹了CSS中的偽類，從什么是偽類，常見的偽類的用法( first-child，: last-seudo，: nth-child，: lang)最后介紹了偽類可以與CSS類結合使用。

[[430467]]

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

一、什么是偽類?

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

例如，針對第一個或最后一個子元素。

偽類以冒號(:)開頭。

語法

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

二、最常用的偽類

錨偽類

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

這些偽類使可以對未訪問的鏈接進行樣式化，而對訪問的鏈接進行樣式化。最常見的樣式設置技術是從訪問的鏈接中刪除下劃線。

例

  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> 

一些錨點偽類是動態(tài)的，是由于用戶與文檔進行交互(例如懸停或聚焦等)而應用的。

例

  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> 

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

  • : hover 當可被用于在用戶將鼠標懸停在按鈕上時改變按鈕的顏色用。
  • : active 當元素被激活或單擊時適用。
  • : focus 當元素具有鍵盤焦點時適用。

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

<1> : first-child偽類

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

  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偽類匹配的是一些其他元素的最后一個子元素的元素。ul li:last-child例中的選擇器從無序列表中選擇最后一個列表項，并從其中刪除右邊框。

  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引入了一個新的:nth-child偽類，使可以將給定父元素的一個或多個特定子對象作為目標。

此選擇的基本語法可以與給予:nth-child(N)，其中N是一個參數(shù)，其可以是一個數(shù)字，一個關鍵字(even或odd)，或形式的表達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ī)則僅突出顯示了代替表行，而沒有向元素添加任何ID或類。*/ 

/*上面示例中的樣式規(guī)則僅突出顯示了代替表行，而沒有向元素添加任何ID或類。*/

提示：

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

<4> : lang偽類

語言偽類:lang允許根據(jù)特定標記的語言設置來構造選擇器。

:lang以下示例中的偽類為明確賦予語言值的元素定義了引號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”>段落中的引號</ 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類結合使用。

在下面的示例中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> 

四、總結

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

希望能夠幫助讀者更好的學習。

 

責任編輯：武曉燕 來源： 前端進階學習交流
CSS偽類 樣式
相關推薦

2021-01-12 08:42:28

Css前端Pseudo-clas

2020-12-18 08:09:53

CSS偽元素基礎

2021-04-07 06:11:37

Css前端CSS定位知識

2021-01-25 05:39:54

Css前端Border

2021-05-31 09:30:36

Css前端CSS 特效

2020-11-03 19:18:28

CSS對齊文本

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平臺

2020-11-17 11:10:21

CSS選擇器HTML

2021-05-20 09:02:59

CSS單位長度

2023-08-01 14:34:12

HTMLCSS

2023-06-28 15:04:59

CSSHTML

2022-02-15 09:31:43

透明度CSS

2022-03-04 09:31:41

CSS前端屬性選擇器

2020-11-27 08:51:29

CSSOpacity透明度

2020-12-18 05:40:37

CSS clearHtml

2020-11-10 10:48:10

JavaScript屬性對象

2021-01-29 18:41:16

JavaScript函數(shù)語法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch
點贊
收藏

51CTO技術棧公眾號