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

Python進階者 2023-02-10 發(fā)布于廣東

展開全文

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

今

日

雞

湯

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

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

一,、什么是偽類？

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

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

偽類以冒號（:）開頭,。

語法

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

二、最常用的偽類

錨偽類

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

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

例

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

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

例

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

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

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

注：為了使這些偽類很好地工作，必須按正確的順序?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偽類，使可以將給定父元素的一個或多個特定子對象作為目標,。

此選擇的基本語法可以與給予:nth-child(N),，其中N是一個參數(shù)，其可以是一個數(shù)字,，一個關(guān)鍵字（even或odd）,，或形式的表達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ù)特定標記的語言設(shè)置來構(gòu)造選擇器,。

: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類結(jié)合使用。

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