App下載

偽類是什么?常用的偽類選擇器有哪些?

猿友 2021-05-27 12:08:34 瀏覽數(shù) (7820)
反饋

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

偽類是什么?

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

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

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

動態(tài)偽類選擇器

  • :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?。必須嚴格按照此規(guī)則來設(shè)置屬性,否則無效。

UI 元素狀態(tài)偽類選擇器

  • :checked。選中的復選按鈕或者單選按鈕表單元素
  • :enabled。所有啟用的表單元素
  • :disabled。所有禁用的表單元素
UI 元素狀態(tài)偽類選擇器主要是針對 Form 表單元素進行操作,最常見的使用方式如設(shè)置 "type="text" 有 enable 和 disabled 兩種狀態(tài),enable 為可寫狀態(tài),disabled 為不可狀態(tài)。

結(jié)構(gòu)偽類選擇器

  • :fisrt-child。父元素的第一個子元素
  • :last-child。父元素的最后一個子元素的元素
  • :root。元素所在文檔的根元素。在 HTML 文檔中,根元素始終是 html,此時該選擇器與 html 類型選擇器匹配的內(nèi)容相同
  • :nth-child(n)。父元素的第 n 個子元素。其中 n 可以是整數(shù)(1,2,3)、關(guān)鍵字(even,odd)、也可以是公式(2n+1),而且 n 值起始值為 1,而不是 0。
  • :nth-last-child(n):父元素的倒數(shù)第 n 個子元素。此選擇器與 :nth-child(n) 選擇器計算順序剛好相反,但使用方法都是一樣的,其中 :nth-last-child(1) 始終匹配最后一個元素,與 last-child 等同。
  • :nth-of-type(n) 。父元素內(nèi)具有指定類型的第 n 個元素
  • :nth-last-of-type(n)。父元素內(nèi)具有指定類型的倒數(shù)第 n 個元素
  • :first-of-type。父元素內(nèi)具有指定類型的第一個元素,與 nth-of-type(1) 等同
  • :last-of-tye 。父元素內(nèi)具有指定類型的最后一個元素,與 :nth-last-of-type(1) 等同
  • :only-child 。父元素只包含一個子元素,且該子元素匹配元素
  • :only-of-type。選擇父元素只包含一個同類型子元素,且該子元素匹配選擇元素
  • :empty。選擇沒有子元素的元素,而且該元素也不包含任何文本節(jié)點
使用結(jié)構(gòu)偽類選擇器的好處是可以根據(jù)元素在文檔中所處的位置,來動態(tài)地選擇元素,從而減少 HTML 文檔對 id 或類的依賴,有助于保持代碼干凈整潔。
另外需要注意的是,在結(jié)構(gòu)偽類選擇器中,子元素的序號是從 1 開始的。

否定偽類選擇器

  • E:not(F)。選擇所有除元素 F 外的 E 元素
以上就是文章“偽類是什么?常用的偽類選擇器有哪些?”的全部內(nèi)容。更多 CSS 學習請前往 w3cschool。

CSS

1 人點贊