css中常用的偽類選擇器有哪些

這篇文章主要為大家展示了“css中常用的偽類選擇器有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css中常用的偽類選擇器有哪些”這篇文章吧。

偽類選擇器是 CSS 樣式表中重要的內容之一。那么這篇文章中 w3cschool 小編來為大家介紹下偽類是什么，常用的偽類選擇器有哪些。

偽類是什么？

CSS 偽類是用來添加一些選擇器的特殊效果。

由于狀態的變化是非靜態的，所以元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和 class 有些類似，但它是基于文檔之外的抽象，所以叫偽類。

常用的偽類選擇器有哪些？

動態偽類選擇器

• :link。元素被定義了超鏈接但并未被訪問過

• :visited。元素被定義了超鏈接并已被訪問過

• :active。元素被激活

• :hover。鼠標懸停

• :focus。元素獲取焦點

在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后；a:active 必須被置于 a:hover 之后。所以，a 標簽的這四種偽類選擇器的順序為：a:link ，a:visited，a:hover ，a:active。必須嚴格按照此規則來設置屬性，否則無效。

UI 元素狀態偽類選擇器

• :checked。選中的復選按鈕或者單選按鈕表單元素

• :enabled。所有啟用的表單元素

• :disabled。所有禁用的表單元素

UI 元素狀態偽類選擇器主要是針對 Form 表單元素進行操作，最常見的使用方式如設置 "type="text" 有 enable 和 disabled 兩種狀態，enable 為可寫狀態，disabled 為不可狀態。

結構偽類選擇器

• :fisrt-child。父元素的第一個子元素

• :last-child。父元素的最后一個子元素的元素

• :root。元素所在文檔的根元素。在 HTML 文檔中，根元素始終是 html，此時該選擇器與 html 類型選擇器匹配的內容相同

• :nth-child(n)。父元素的第 n 個子元素。其中 n 可以是整數（1，2，3）、關鍵字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值為 1，而不是 0。

• :nth-last-child(n)：父元素的倒數第 n 個子元素。此選擇器與 :nth-child(n) 選擇器計算順序剛好相反，但使用方法都是一樣的，其中 :nth-last-child(1) 始終匹配最后一個元素，與 last-child 等同。

• :nth-of-type(n) 。父元素內具有指定類型的第 n 個元素

• :nth-last-of-type(n)。父元素內具有指定類型的倒數第 n 個元素

• :first-of-type。父元素內具有指定類型的第一個元素，與 nth-of-type(1) 等同

• :last-of-tye 。父元素內具有指定類型的最后一個元素，與 :nth-last-of-type(1) 等同

• :only-child 。父元素只包含一個子元素，且該子元素匹配元素

• :only-of-type。選擇父元素只包含一個同類型子元素，且該子元素匹配選擇元素

• :empty。選擇沒有子元素的元素，而且該元素也不包含任何文本節點

使用結構偽類選擇器的好處是可以根據元素在文檔中所處的位置，來動態地選擇元素，從而減少 HTML 文檔對 id 或類的依賴，有助于保持代碼干凈整潔。
另外需要注意的是，在結構偽類選擇器中，子元素的序號是從 1 開始的。

否定偽類選擇器

• E:not(F)。選擇所有除元素 F 外的 E 元素

以上是“css中常用的偽類選擇器有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！