談談css僞類與僞元素

前端er們大都或多或少地接觸過CSS僞類和僞元素，好比最多見的:focus、:hover以及<a>標籤的:link、:visited等，僞元素較常見的好比:before、:after等。

在這裏也許有很多人都見過:before，::before這樣的寫法，估計有些人很納悶，這二者有什麼區別嗎？

有疑問，那咱們就先把疑問解決了先，不要把疑問留着。其實:before，::before這兩種寫法都是等效，只是:befor是CSS2的寫法，::before是CSS3的寫法。雙冒號(::)這是CSS3 規範中的要求，目的是爲了區分僞類和僞元素，大多數瀏覽器都支持這兩種表示方式。單冒號(:)用於 CSS3 僞類，雙冒號(::)用於 CSS3 僞元素。對於 CSS2 中已經有的僞元素，例如 :before，單冒號和雙冒號的寫法 ::before 做用是同樣的。通常狀況下爲兼容性考慮使用單冒號(:)。

解決完疑問，那咱們就能夠愉快的開始接下來的內容了。

僞類 - pseudo classes

僞類存在的意義是爲了經過選擇器找到那些不存在與DOM樹中的信息（例如<a>標籤的:link、:visited等，這些信息不存在與DOM樹結構中，只能經過CSS選擇器來獲取）以及不能被常規CSS選擇器獲取到的信息（例如要修改第幾個子元素的樣式）。

僞類的語法：

selector : pseudo-class {property: value}

CSS 類也可與僞類搭配使用：

selector.class : pseudo-class {property: value}

僞類選擇器（這裏的僞類選擇器等效於文中所涉及到的僞類）與咱們經常使用的類選擇器的區別是：類選擇器能夠隨便起名，譬如「p.right」，而後在頁面p標籤的class類中加入類「right」，可是僞類選擇器是CSS中已經定義好的選擇器，不能隨便起名。下面是一些咱們常見的僞類選擇器：

:active —— 樣式添加到正在被激活的元素 
:focus —— 樣式添加到得到焦點的元素 
:hover —— 樣式添加到鼠標懸浮的元素 
:link —— 樣式添加到未被訪問過的連接 
:visited —— 樣式添加到已經訪問過的連接 
:first-child —— 樣式添加到第一個子元素 
:lang —— 樣式添加到指定lang語言的標籤

如何理解僞類能夠經過選擇器找到那些不存在與DOM樹中的信息，咱們看看下面這個栗子：

a:link {color: #FF0000}        /* 未訪問的連接 */
a:visited {color: #00FF00}    /* 已訪問的連接 */
a:hover {color: #FF00FF}    /* 鼠標移動到連接上 */
a:active {color: #0000FF}    /* 選定的連接 */

連接的不一樣狀態均可以不一樣的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。顯然這個些狀態並無存在DOM樹的信息裏面。

咱們再來看個栗子：

p:first-child {
    color: red;
}

<div>
    <p>我是文本</p>
    <p>我是文本</p>
</div>

這個效果至關於下面的常規寫法：

.red{
    color: red;
}

<div>
    <p class="red">我是文本</p>
    <p>我是文本</p>
</div>

再舉個栗子，經過:nth-child()僞類能夠實現一些頗有意思的效果，好比：

table tr:nth-child(2n) td{
   background-color: #ccc;
}
table tr:nth-child(2n+1) td{
   background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

上面的代碼將全部偶數行背景色設置爲#ccc，不能被5整除的奇數行設置背景色#fff，可以被5整除的奇數行設置背景色#f0f。這若是要用常規CSS去實習這效果，恐怕無法搞吧，由於常規CSS選擇器並沒辦法獲取到這些元素的位置信息。

CSS3中還引入了許多新的僞類，感興趣的能夠參考這裏。

 

僞元素 - Pseudo-elements

僞元素的語法：

selector:pseudo-element {property:value;}

CSS 類也能夠與僞元素配合使用：

selector.class:pseudo-element {property:value;}

僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（能夠理解爲html源碼）。好比：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而僞元素可使開發者能夠提取到這些信息。而且，一些僞元素可使開發者獲取到不存在於源文檔中的內容（好比常見的::before,::after）。

上面段話是僞元素的清晰定義，也是僞元素與僞類最大的區別。簡單來講，僞元素建立了一個虛擬容器，這個容器不包含任何DOM元素，可是能夠包含內容。另外，開發者還能夠爲僞元素定製樣式。

常見的僞元素種類：

:first-letter —— 樣式添加到文本首字母
:first-line —— 樣式添加到文本首行
:before —— 樣式添加到元素以前
:after —— 樣式添加到元素以後

僞元素的由兩個冒號::開頭，而後是僞元素的名稱，使用兩個冒號::是爲了區別僞類和僞元素（CSS2中並無區別）。固然，考慮到兼容性，CSS2中已存的僞元素仍然可使用一個冒號:的語法，可是CSS3中新增的僞元素必須使用兩個冒號::。


來看個栗子：

p:first-letter {
    color: red;
}

<p>我是文本</p>

其效果至關於：

span {
    color: red;
}

<p><span>我</span>是文本</p>

效果以下：

 

注意：一個選擇器只能使用一個僞元素，而且僞元素必須處於選擇器語句的最後。

再來看看利用僞元素實現分割線的效果：

.spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
}

<p class="spliter">分割線</p>

效果以下：

 

再來看一個：

.test-div {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.test-div::before {
    content: "♥";
    color: red;
}
.test-div::after {
    content: "♥";
    color: blue;
}

<div class="test-div">helloworld</div>

效果如圖：

利用僞元素其實還能實現不少效果，好比陰影效果、圖像的形變效果、氣泡效果等等，在這裏我就不在貼出來了。師傅領進門，修行在我的，你們感興趣的話百度一下，就有不少。

 

總結：

• 僞類的效果須要一個實際的類才能達到，而僞元素須要一個實際的元素才能達到。

• 僞類能夠同時運用多個，而僞元素只能一次用一個。

• 在CSS3中，僞類用一個冒號:，僞元素用兩個冒號::。

• 爲兼容性考慮須要使用一個冒號的格式。