說說僞類與僞元素的不一樣

說說僞類與僞元素的不一樣

僞元素用來建立HTML文檔語言指定以外文檔樹的抽象層。好比HTML沒有提供文檔元素內容的首字母或第一行的訪問機制。CSS僞元素容許做者引用這些除此以外沒法訪問的信息。僞元素還提供一種方法來引用不存在於文檔中的內容。（好比，::before 和 ::after ）。

一個僞元素由2個冒號（::）加上僞元素的名字所定義。

每一個選擇器中只能出現一個僞元素，而且只能出如今選擇器主體的後面。

僞元素默認是inline樣式的，經過設置成絕對定位，可強制改變display爲block，這樣對其設置寬高才能生效。

注意：後續版本可能會容許每一個選擇器中出現多個僞元素。

從上面的定義，咱們能夠得知僞元素事實上建立了一個虛擬的元素，在這個虛擬元素上能夠應用通常CSS規則乃至僞類選擇器。僞元素並不選定（過濾）元素，實際上它們選定（過濾）內容（::first-line,::first-letter），把內容包裝到一個虛擬的容器中，並能夠爲該容器添加樣式。或建立內容（::before,::after，而後包裝到一個虛擬容器中，做者能夠爲此容器添加樣式。

 

僞元素其實是1：選定（過濾）選擇器的指定元素的內容，把內容包裝到一個虛擬的容器中，並能夠爲該容器添加樣式。2:在選擇器指定的元素先後建立內容，該內容也包裝到一個虛擬的容器中，並不存在與文檔中，能夠爲容器添加樣式

 

 

Selector	Meaning	CSS
::first-letter	選擇指定元素的第一個單詞	1
::first-line	選擇指定元素的第一行	1
::after	在指定元素的內容前面插入內容	2
::before	在指定元素的內容後面插入內容	2
::selection	選擇指定元素中被用戶選中的內容	3

僞類    CSS中的類（class）是爲了方便過濾（即選擇）元素，以給這類元素添加樣式，class是定義在HTML文檔樹中的。

可是這在一些狀況下是不夠用的，好比用戶的交互動做（懸停、激活等）會致使元素狀態發生變化，class對這些動態變化無能爲力。

 

僞類

Selector	Meaning	CSS
:active	選擇正在被激活的元素	1
:hover	選擇被鼠標懸浮着元素	1
:link	選擇未被訪問的元素	1
:visited	選擇已被訪問的元素	1
:first-child	選擇知足是其父元素的第一個子元素的元素	2
:lang	選擇帶有指定 lang 屬性的元素	2
:focus	選擇擁有鍵盤輸入焦點的元素	2
:enable	選擇每一個已啓動的元素	3
:disable	選擇每一個已禁止的元素	3
:checked	選擇每一個被選中的元素	3
:target	選擇當前的錨點元素	3
:first-of-type	選擇知足是其父元素的第一個某類型子元素的元素	3
:last-of-type	選擇知足是其父元素的最後一個某類型子元素的元素	3
:only-of-type	選擇知足是其父元素的惟一一個某類型子元素的元素	3
:nth-of-type(n)	選擇知足是其父元素的第n個某類型子元素的元素	3
:nth-last-of-type(n)	選擇知足是其父元素的倒數第n個某類型的元素	3
:only-child	選擇知足是其父元素的惟一一個子元素的元素	3
:last-child	選擇知足是其父元素的最後一個元素的元素	3
:nth-child(n)	選擇知足是其父元素的第n個子元素的元素	3
:nth-last-child(n)	選擇知足是其父元素的倒數第n個子元素的元素	3
:empty	選擇知足沒有子元素的元素	3
:in-range	選擇知足值在指定範圍內的元素	3
:out-of-range	選擇值不在指定範圍內的元素	3
:invalid	選擇知足值爲無效值的元素	3
:valid	選擇知足值爲有效值的元素	3
:not(selector)	選擇不知足selector的元素	3
:optional	選擇爲可選項的表單元素，即沒有「required」屬性	3
:read-only	選擇有"readonly"的表單元素	3
:read-write	選擇沒有"readonly"的表單元素	3
:root	選擇根元素	3

爲此，CSS引入了僞類（pseudo-class）的概念用來支持根據文檔樹之外的信息來過濾元素的能力。

僞類存在的意義是爲了經過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。

僞類是一個抽象類，本質上仍是一個類，所以其主要做用仍然是用來選擇元素然後設定具體的樣式。

僞類的定義使用：單冒號加上名稱，如 mydiv:hover。

僞類其實是1：獲取不存在與DOM樹中的信息。好比<a>標籤的:link、visited等，這些信息不存在與DOM樹結構中，只能經過CSS選擇器來獲取，僞類選擇元素的依據不是名稱、屬性或內容，而是根據特徵（好比狀態或順序）。（:lang除外）2：不能被常規CSS選擇器獲取到的信息。:first-child;

僞類本質上是爲了彌補常規CSS選擇器的不足，以便獲取到更多信息；

 

 

前面一節和本節內容分別詳細講述了僞類和僞元素的使用，咱們應該已經大體理解了二者的異同點，這裏再總結一下：

 

二者都不存在於HTML文檔樹中，都是爲了支持依靠文檔樹以外的信息來進行格式化。

1. 僞類本質上是爲了彌補常規CSS選擇器的不足，以便獲取到更多信息；
2. 僞元素本質上是建立了一個有內容的虛擬容器；
3. CSS3中僞類和僞元素的語法不一樣；
4. 能夠同時使用多個僞類，而只能同時使用一個僞元素；

 

1. 僞類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具備的特性，而不是元素的id、class、屬性等靜態的標誌。因爲狀態是動態變化的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此能夠看出，它的功能和class有些相似，但它是基於文檔以外的抽象，因此叫僞類。什麼是僞類呢？簡單點說，就是你沒定義這個類，但它確實做爲一個類來使用。

2. 與僞類針對特殊狀態的元素不一樣的是，僞元素是對元素中的特定內容進行操做，它所操做的層次比僞類更深了一層，也所以它的動態性比僞類要低得多。實際上，設計僞元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或後面這種普通的選擇器沒法完成的工做。它控制的內容實際上和元素是相同的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此叫僞元素。

 

 

簡單理解，僞元素是能夠設置content屬性的，相似於標籤，可是僞類只能設置樣式不能設置內容