【前端入門必知必會】css 僞類和僞元素選擇器

這一篇咱們來介紹一類稍微特殊的兩種選擇器–僞類選擇器和僞元素選擇器。在頁面中，這兩類選擇器一般用於標記一些特殊的樣式，這些樣式是基礎選擇器和組合選擇器解決不了的，有些甚至是 JS 也作不到的。下面咱們就分別介紹一下這兩種特殊的選擇器。

僞類選擇器

在頁面中，有時候同一個元素在不一樣動做下有不一樣的樣式。好比連接在沒有點擊的時候有個樣式，在鼠標放上去有另外的樣式，還有在點擊完成之後又會又一個樣式。這幾種狀況下這個連接的標籤並無變化，有變化的只是它的狀態，這時候就能夠裏用僞類來實現這個需求。在瀏覽器中，僞類的出現是爲了向某些選擇器添加特殊的效果或限制。僞類是在正常的選擇器後面加上僞類名稱，中間用冒號(:)隔開。好比咱們但願一個超連接在鼠標放上去的時候有一個下劃線：

a:{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}複製代碼

這樣設置一個 a 標籤樣式後，就是鼠標放上去會出現下劃線，移走後下劃線又會消失。

僞類主要有兩方面的用處，一方面是標記一些特殊的狀態，也就是一開始說的那個例子那種；另外還有一類僞類是有篩選的功能。下面來列舉一下這兩種僞類裏經常使用的選擇器的功能。

1、標記狀態的僞類：

能夠標記元素狀態的僞類有以下幾種：

• :link，選取未訪問過的超連接元素。若是咱們注意過搜索引擎的結果的話，它裏面的連接只要點過的就會變色，從而標記哪一個連接是訪問過的。:link 這個屬性就是用來標識沒訪問過的連接。
• :visited，選取訪問過的超連接元素。和第一條相反，:visited 是用來標記哪一個連接是已經訪問過的，防止重複點擊。
• :hover，選取鼠標懸停的元素。，這個僞類常常用在 PC 端，當鼠標放在一個元素上時，能夠用 :hover 來控制鼠標懸停的樣式。由於在移動端裏沒有鼠標的概念，因此移動端裏不多用這個僞類。
• :active，選取點中的元素。這個僞類的做用在剛纔提到過了，當咱們但願按鈕有操做反饋的時候，能夠用它來標記操做反饋的樣式。固然這個僞類也是能夠通用的，並非只能用在按鈕上。
• :focus，選取得到焦點的元素。這個僞類用來標識得到焦點的元素，好比搜索框在聚焦的時候有個比較明顯的邊框，方便用戶知道當前在可輸入的狀態。

2、篩選功能的僞類：

有些僞類也能夠有篩選的功能，能夠根據元素的特色或者索引來給特定的元素加上樣式。經常使用的有篩選功能的僞類以下：

• :empty，選取沒有子元素的元素。好比選擇空的 span，就能夠用 span:empty 選擇器來選擇。這裏要注意元素內有空格的話也不能算空，不會被這個僞類選中。
• :checked，選取勾選狀態的 input 元素， 只對 radio 和 checkbox 生效。
• :disabled，選取禁用的表單元素。
• :first-child，選取當前選擇器下第一個元素。
• :last-child，和 first-child 相反，選取當前選擇器下最後一個元素。
• :nth-child(an+b)，選取指定位置的元素。這個僞類是有參數的，參數能夠支持 an+b 的形式，這裏 a 和 b 都是可變的，n 從0起。使用這個僞類能夠作到選擇第幾個，或者選擇序號符合 an+b 的全部元素。好比使用 li:nth-child(2n+1)，就能夠選中 li 元素中序號是2的整數倍加1的全部元素，也就是第一、三、五、七、九、2n+1個 li 元素。
• :nth-last-child(an+b)，這個僞類和 nth-child 類似，只不過在計數的時候，這個僞類是從後往前計數。
• :only-child，選取惟一子元素。若是一個元素的父元素只有它一個子元素，這個僞類就會生效。若是一個元素還有兄弟元素，這個僞類就不會對它生效。
• :only-of-type，選取惟一的某個類型的元素。若是一個元素的父元素裏只有它一個當前類型的元素，這個僞類就會生效。這個僞類容許父元素裏有其餘元素，只要不和本身同樣就能夠。

僞元素選擇器

僞元素選擇器是用於向某些元素設置特殊效果。僞元素選擇器選中的並非真實的 DOM 元素，因此叫僞元素選擇器。僞元素選擇器經常使用的也就下面 5 個：

• ::first-line，爲某個元素的第一行文字使用樣式。
• ::first-letter，爲某個元素中的文字的首字母或第一個字使用樣式。
• ::before，在某個元素以前插入一些內容。
• ::after，在某個元素以後插入一些內容。
• ::selection，對光標選中的元素添加樣式。

Tips： 1. 僞元素選擇器構造的元素是虛擬的，因此不能用 JS 去操做它。 2. 若是同時使用了 before 和 first-letter 兩個僞類，第一個字是要從 before 裏的內容開始算起的，若是 before裏面的內容是一個非文本元素，那 first-letter 也會做用在這個非文本元素上，可是不必定能生效。 3. first-line 和 first-letter 不適用於內聯元素，在內聯元素中這兩個選擇器都會失效。 4. 在 CSS3 中，規定了僞類用一個冒號（:）表示，僞元素用兩個冒號表示（::）。但除了 selection，其他四個僞元素選擇器已經在 CSS2 中存在且和僞類用的是同樣的單冒號表示的。爲了向下兼容，如今的瀏覽器中僞元素選擇器用單冒號和雙冒號均可以。在沒有兼容問題的狀況下，仍是建議你們按着新的 CSS3 標準來開發。

總結

這一篇講了僞類選擇器和僞元素選擇器，這兩種選擇器都是爲了向元素添加特殊效果，但這些效果僅用於顯示，不能被 js 操做。選擇器這部分裏列出來的也都是 CSS3 以前版本定義出來的經常使用選擇器。