細說CSS僞類和僞元素

原文

　　簡書原文：https://www.jianshu.com/p/eae56b7fe7fe

大綱

　　一、僞元素
　　二、僞類元素
　　三、僞元素和僞類元素的區別
　　四、僞類和僞元素的使用

一、僞元素

　　僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（能夠理解爲html源碼）。好比：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而僞元素可使開發者能夠提取到這些信息。而且，一些僞元素可使開發者獲取到不存在於源文檔中的內容（好比常見的::before,::after）。
　　僞元素的由兩個冒號::開頭，而後是僞元素的名稱。
　　使用兩個冒號::是爲了區別僞類和僞元素（CSS2中並無區別）。固然，考慮到兼容性，CSS2中已存的僞元素仍然可使用一個冒號:的語法，可是CSS3中新增的僞元素必須使用兩個冒號::。
　　一個選擇器只能使用一個僞元素，而且僞元素必須處於選擇器語句的最後。注：不排除將來會加入同時使用多個僞元素的機制。
　　一樣，第一段話是僞元素的清晰定義，也是僞元素與僞類最大的區別。簡單來講，僞元素建立了一個虛擬容器，這個容器不包含任何DOM元素，可是能夠包含內容。另外，開發者還能夠爲僞元素定製樣式。
　　以::first-line爲例，它獲取了指定元素的第一行內容而且將第一行的內容加入到虛擬容器中。若是經過JavaScript來實現這個邏輯，那麼要考慮的因素就太多了，好比制定元素的寬度、字體大小，甚至浮動元素的圖文混排等等。固然，這些問題確實是能夠用JavaScript來解決的，可是相對於::first-line簡簡單單的幾個字，用JavaScript恐怕不止這些吧！

二、僞類元素

　　僞類存在的意義是爲了經過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。
　　僞類由一個冒號:開頭，冒號後面是僞類的名稱和包含在圓括號中的可選參數。
　　任何常規選擇器能夠在任何位置使用僞類。僞類語法不區別大小寫。一些僞類的做用會互斥，另一些僞類能夠同時被同一個元素使用。而且，爲了知足用戶在操做DOM時產生的DOM結構改變，僞類也能夠是動態的。
　　其實第一段話就囊括CSS3僞類的所有定義了，這段話中指出CSS3僞類的功能有兩種：
　　　　一、獲取不存在與DOM樹中的信息。好比<a>標籤的:link、visited等，這些信息不存在與DOM樹結構中，只能經過CSS選擇器來獲取；
　　　　二、獲取不能被常規CSS選擇器獲取的信息。好比僞類:target，它的做用是匹配文檔(頁面)的URI中某個標誌符的目標元素。

三、僞元素和僞類元素的區別

　　一、僞類基於的是當前元素處於的狀態，是動態變化的。
　　二、僞元素是對元素中的特定內容進行操做。設計僞元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或後面這種普通的選擇器沒法完成的工做。
　　三、僞元素的權重比僞類高，好比一個容器的爲元素和僞類都定義了同一屬性，但值不同，那麼將採用僞元素的。

四、僞類和僞元素的使用

/*
    如下代碼經過僞類"lang獲取不一樣lang屬性的節點，併爲之設置僞元素::after，僞元素的
內容是此節點的語言類型。
*/
q:lang(de)::after{
    content: " (German) ";
}
q:lang(en)::after{
    content: " (English) ";
}
q:lang(fr)::after{
    content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

參考網址

http://www.javashuo.com/article/p-hpvzweoj-g.html
你所不知的CSS::before和::after僞元素用法