全國服務熱線400-0000000 企業熱線0561-3023030

css-偽類和偽元素

css-偽類和偽元素

無論是偽類還是偽元素,都屬于CSS選擇器的范疇。所以它們的定義可以在CSS標準的選擇器章節找到。分別是 CSS2.1 Selectors 和 CSS Selector Level 3,兩者都已經是推薦標準。 

一:偽類種類

css偽類用于向某些選擇器添加特殊的效果

 

3qMZbe.jpg
 

 

二:偽元素種類

css偽元素用于將特殊的效果添加到某些選擇器

 

eINria.jpg
 

 

三:偽類和偽元素的區別

偽類和偽元素本身就有一個根本的不同之處,這點直接體現在了標準的描述語句上。 
偽類的效果可以通過添加一個實際的類來達到,而偽元素的效果則需要通過添加一個實際的元素才能達到,這也是為什么他們一個稱為偽類,一個稱為偽元素的原因。

偽元素:

先看一個偽元素 first-line 例子。現在有一段HTML,內容是一個段落: 

 <p>I am the bone of my sword. Steel is my body, and fire is my blood. 
 I have created over a thoustand blades. 
 Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. 
 Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

如果我要描述這個段落的第一行,在不用偽元素的情況下,我會怎么做?想來我一定要嵌套一層 span,然后加上類名: 

1 <p><span >I am the bone of my sword. Steel is my body, and fire is my blood. </span> 
2 I have created over a thoustand blades.
3 Unknown to Death.Nor known to Life. Have withstood pain to create many weapon. 
4 Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

偽類:

再反觀一個偽類 first-child 的例子,有一個簡單的列表: 

1 <ul>
2 <li></li>
3 <li></li>
4 </ul>

如果我要描述 ul 的第一個元素,我無須嵌套新的元素,我只須給第一個已經存在的 li 添加一個類名就可以了: 

1 <ul>
2 <li ></li>
3 <li></li>
4 </ul>

盡 管,第一行和第一個元素,這兩者的語意相似,但最后作用的效果卻完全不同。

所以,偽類和偽元素的根本區別在于:它們是否創造了新的元素(抽象)。

從我們模 仿其意義的角度來看,如果需要添加新元素加以標識的,就是偽元素,反之,如果只需要在既有元素上添加類別的,就是偽類。

而這也是為什么,標準精確地使用 “create” 一詞來解釋偽元素,而使用 “classify” 一詞來解釋偽類的原因。

一個描述的是新創建出來的“幽靈”元素,另一個則是描述已經存在的符合“幽靈”類別的元素。 

偽類一開始單單只是用來表示一些元素的動態狀態,典型的就是鏈接的各個狀態(LVHA)。隨后CSS2標準擴展了其概念范圍,使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。 

偽元素則代表了某個元素的子元素,這個子元素雖然在邏輯上存在,但卻并不實際存在于文檔樹中。

四:偽類和偽元素的混淆

CSS Selector Level 3 為了區分這兩者的混淆,而特意用冒號加以區分: 

偽類用一個冒號表示 :first-child 

偽元素則使用兩個冒號表示 ::first-line 

聲明:文章"css-偽類和偽元素"為相王科技 Array原創文章,轉載請注明出處,謝謝合作!

推薦閱讀

做人重要还是赚钱重要