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

作者：前端進階者 2021-10-22 09:55:13

開發前端

本文基于CSS基礎，介紹了CSS中的偽類，從什么是偽類，常見的偽類的用法( first-child，: last-seudo，: nth-child，: lang)最后介紹了偽類可以與CSS類結合使用。

[[430467]]

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

一、什么是偽類?

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

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

偽類以冒號(:)開頭。

語法

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

二、最常用的偽類

錨偽類

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

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

例

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>錨偽類的示例</title> 
<style> 
a:link { 
color: blue 
} 
 
a:visited { 
text-decoration: none; 
} 
</style> 
</head> 
<body style="background-color: aqua;"> 
<p>Visit  
     <a href="https://www.baidu.com" target="_blank">www.baidu.com</a></p> 
</body> 
</html>

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

例

<style> 
a:hover { 
color: red; 
} 
 
a:active { 
color: gray; 
} 
 
a:focus { 
color: yellow; 
} 
</style>

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

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

注：為了使這些偽類很好地工作，必須按正確的順序將它們定義 - :link, :visited, :hover, :active, :focuss。

<1> : first-child偽類

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

<style> 
ol { 
padding: 0; 
list-style: none; 
} 
 
ol li { 
padding: 10px 0; 
border-top: 1px solid #000000; 
} 
 
li:first-child { 
border-top: none; 
} 
</style>

注意：

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

<2> : last-seudo偽類

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

<style> 
   ul{ 
       padding: 0; 
       list-style: none;           
  } 
   ul li{ 
       display: inline; 
       padding: 0 20px; 
       border-right: 1px solid #000000; 
  } 
   li:last-child { 
       border-right: none; 
  } 
</style>

注意：

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

<3> : nth-child偽類

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

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

例

<style> 
table { 
margin: 30px; 
border-collapse: collapse; 
} 
 
table tr { 
border-bottom: 1px solid #666; 
} 
 
table tr th, 
table tr td { 
padding: 10px; 
} 
 
table tr:nth-child(2n) td { 
background: #f2f2f2; 
} 
</style> 
/*上面示例中的樣式規則僅突出顯示了代替表行，而沒有向元素添加任何ID或類。*/

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

提示：

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

<4> : lang偽類

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

:lang以下示例中的偽類為明確賦予語言值的元素定義了引號no。

例

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

注：

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

三、偽類和CSS類

偽類可以與CSS類結合使用。

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>使用帶有選擇器的CSS偽類示例</title> 
<style> 
a.red:link { 
color: #ff0000; 
} 
</style> 
</head> 
<body style="background-color: aqua;"> 
<p> 
<a href="#">Click me</a> 
<br> 
<a href="#" class="red">Click me</a> 
</p> 
</body> 
</html>

四、總結

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

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

責任編輯：武曉燕來源：前端進階學習交流

CSS 偽類樣式