點擊上方“前端進(jìn)階學(xué)習(xí)交流”，進(jìn)行關(guān)注

回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料

今

日

雞

湯

?？驼勫?，煙濤微茫信難求。

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

一、什么是偽類？

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

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

偽類以冒號（:）開頭。

語法

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

二、最常用的偽類

錨偽類

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

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

例

<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.coma>p>body>html>

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

例

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

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

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

注：為了使這些偽類很好地工作，必須按正確的順序?qū)⑺鼈兌x - ?: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偽類，使可以將給定父元素的一個或多個特定子對象作為目標(biāo)。

此選擇的基本語法可以與給予:nth-child(N)，其中N是一個參數(shù)，其可以是一個數(shù)字，一個關(guān)鍵字（even或odd），或形式的表達(dá)xn+y，其中x和y是整數(shù)（例如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>/*上面示例中的樣式規(guī)則僅突出顯示了代替表行，而沒有向元素添加任何ID或類。*/

提示：

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

<4> : lang偽類

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

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

例

<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>

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

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

一、什么是偽類？

語法

二、最常用的偽類