【愣錘筆記】你真的瞭解什麼是僞類和僞元素嗎

僞類和僞元素，做爲一個前端確定是都用過。而後，你問下本身到底什麼是僞類？什麼是僞元素？二者真正區別又是什麼？是否是忽然一股懵逼涌上心頭……

對於什麼是僞類，什麼是僞元素，一些小夥伴會知道，僞類是一個冒號的，僞元素是兩個冒號的；又或者，僞類是相似於:hover這樣的，僞元素是相似於:before或::before這樣的。而後，對於這樣的回答，確定是不能令本身滿意的。咱們今天就完全聊一聊僞類和僞元素吧。

僞類，什麼是僞類？

看下w3c對於僞類的定義：

CSS僞類是用來添加一些選擇器的特殊效果。
僞類是基於元素的特徵而不是他們的id、class、屬性或者內容。因爲狀態的變化是非靜態的，因此元素達到一個特定狀態時，它可能獲得一個僞類的樣式，因此它是基於文檔以外的抽象。

先說僞類的用法：

是一個以冒號:做爲前綴，被添加到一個選擇器末尾的關鍵字，例如：:active :hover :link :visited。

css中的僞類及其功能描述

僞類	描述	level
:link	用來選中元素當中的連接。它將會選中全部還沒有訪問的連接。遵循LVHA順序	1
:visited	表示用戶已訪問過的連接。遵循LVHA順序	1
:active	匹配被用戶激活的元素。即鼠標主鍵按下的元素或者tab鍵選中的元素，並不限於a和button。遵循LVHA順序	1
:lang()	基於元素語言來匹配頁面元素,eg:p:lang(en)	2
:first-child	一組兄弟元素中的第一個元素	2
:focus	表示得到焦點的元素	2
:hover	滑過元素時，pc端指鼠標，移動端指觸摸（一般會有bug）	2
:target	表明一個惟一的頁面元素(目標元素)。例如：http://www.example.com/index.html#section2該片斷指向一個ID爲section2的頁面元素	3
:root	匹配文檔樹的根元素,除了優先級更高以外，與html選擇器相同	3
:nth-child()	找到全部當前元素的兄弟元素中符合條件的元素，例如2n+1就是查找1，3，5，7等	3
:nth-of-type()	查找符合條件的相同元素類型的兄弟元素	3
:nth-last-of-type()	從後往前查找符合條件的相同類型的兄弟元素	3
:last-child	一組兄弟元素中的最後一個元素	3
:first-of-type	一組兄弟元素中的具備相同元素類型的第一個元素	3
:last-of-type	一組兄弟元素中的具備相同元素類型的最後一個元素	3
:only-child	惟一的一個子元素	3
:only-of-type	表明了任意一個元素，這個元素沒有其餘相同類型的兄弟元素	3
:empty	表明沒有子元素的元素，子元素有空格和文本都不行，但能夠是註釋	3
:not()	它匹配不符合參數選擇器描述的元素，不能包含另外一個not選擇器	3
:enabled	表示任何啓用的（enabled）元素。若是一個元素可以被激活或獲取焦點，則該元素是啓用的	3
:disabled	表示任何被禁用的元素	3
:checked	表示任何處於選中狀態的radio/checkbox	3
:indeterminate	表示狀態不肯定的表單元素	3
:default	表示一組相關元素中的默認表單元素	3
:valid	表示任意內容經過驗證的<input>或其餘 <form>元素	3
:invalid	表示任意內容未經過驗證的<input>或其餘 <form>元素	3
:in-range	表明一<input> 元素，其當前值處於屬性min 和max 限定的範圍以內	3
:out-of-range	表明一個<input>元素，其當前值處於屬性min 和max 限定的範圍外	3
:required	表示任意擁有required屬性的<input> 或<textarea>	3
:optional	表示任意沒有required屬性的 <input>``<select>或<textarea>	3
:read-only	表示元素不可被用戶編輯的狀態	3
:read-write	表明一個元素能夠被用戶編輯	3

這裏只列舉到css3級別的僞類，css4目前還未在個大瀏覽器統一實現，暫不列舉說明。

LVHA順序：:link — :visited — :hover — :active，在使用這些僞類的時候，要保證元素的樣式被正確渲染，請確保其css樣式的書寫書寫按照這個順序。

對於僞類，其實能夠理解爲是元素的一個狀態，咱們能夠爲這個狀態添加一些樣式。好比div的滑過狀態div:hover{}，輸入框的聚焦狀態input:focus {}，又或者a標籤的訪問過的狀態a:visited {} 可是對於僞類

僞元素，什麼是僞元素？

僞元素是創造DOM以外的對象
僞元素能夠爲一些在源文檔中不存在的內容分配樣式。
僞元素的內容實際上和普通DOM元素是相同的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此叫僞元素。

僞元素的用法：

是2個以冒號::做爲前綴，被添加到一個選擇器末尾的關鍵字，例如：::before 或者 ::after。

css中的僞元素及其功能描述

僞元素	功能描述	level
::after	用來建立一個僞元素，做爲已選中元素的最後一個子元素。一般會配合content屬性來爲該元素添加裝飾內容。這個虛擬元素默認是行內元素	2
::before	建立一個僞元素，其將成爲匹配選中的元素的第一個子元素。常經過 content 屬性來爲一個元素添加修飾性的內容。此元素默認爲行內元素。	2
::first-letter	選中某塊級元素第一行的第一個字母，而且文字所處的行以前沒有其餘內容	1
::first-line	在某塊級元素的第一行應用樣式。第一行的長度取決於不少因素，包括元素寬度，文檔寬度和文本的文字大小	1
::selection	應用於文檔中被用戶高亮的部分	4，WD草案

僞元素before和:after的使用場景

在一些主流的css框架中，例如Bootstrap，對於這兩個僞元素的使用仍是蠻多的。咱們在平常開發中也常用這兩個元素進行一些妙用。

• 清除浮動
• 寫一個三角形/或者一個tip框
• 寫一個箭頭/叉 …… 這些都是很常見的一些小效果，固然還有其餘更有意思的效果。這裏就很少作贅述了，有興趣的小夥伴能夠試着寫一寫。

總結一下：

• 僞類的受體是文檔樹中已有的元素，而僞元素則創立了一個DOM外的元素
• 僞類用於添加元素的特殊效果，而僞元素則是添加元素的內容
• 僞類使用一個冒號（例如:hover），css3標準僞元素使用兩個冒號（例如::before)，css2中的沒有區分僞類和僞元素的用法，所以css2中僞元素也可使用一個冒號。
• PC端更推薦單冒號寫法，移動端更推薦雙冒號寫法
• before/after僞元素須要配合content屬性使用
• 僞類更經常使用於一些簡單的動畫或交互的樣式，例如滑入滑出等，而僞元素更經常使用於字體圖標、清除浮動等

---