CSS中一個冒號和兩個冒號有什么區別

在平時工作中用到偽類選擇器的時候一個冒號和兩個冒號貌似都是可以的，所以兩者到底有什么區別呢，我們先來看下W3C關於CSS3選擇器的規范中有一段描述： 

 

　　A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. 

 

　　This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3. 

 

　　簡單翻譯一下，大意就是，偽元素由雙冒號和偽元素名稱組成。雙冒號是在當前規范中引入的，用於區分偽類和偽元素。但是偽類兼容現存樣式，瀏覽器需要同時支持舊的偽類，比如:first-line、:first-letter、:before、:after等。

那么問題來了，什么是偽類？什么是偽元素？

首先，閱讀 w3c 對兩者的定義：

1. CSS 偽類用於向某些選擇器添加特殊的效果。

2. CSS 偽元素用於將特殊的效果添加到某些選擇器。

可以明確兩點，第一兩者都與選擇器相關，第二就是添加一些“特殊”的效果。這里特殊指的是兩者描述了其他 css 無法描述的東西。

 

偽類可以獨立於文檔的元素來分配樣式，且可以分配給任何元素，邏輯上和功能上類類似，但是其是預定義的、不存在於文檔樹中且表達方式也不同，所以叫偽類。

 

偽元素所控制的內容和一個元素控制的內容一樣，但是偽元素不存在於文檔樹中，不是真正的元素，所以叫偽元素。

 

偽類有：

1. :first-child ，:link:，vistited，:hover:，active:focus，:lang，:not(s)，：root等...

偽元素有：

1. :first-line，:first-letter，:before，:after，:placeholder,:selection

提醒，如果你的網站只需要兼容webkit、firefox、opera等瀏覽器，建議對於偽元素采用雙冒號的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號寫法比較安全。如果自己不確定的話可以針對某些需要兼容的屬性有兩種屬性。

 

偽類和偽元素的區別：

 

偽類

偽類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具有的特性，而不是元素的id、class、屬性等靜態的標志。由於狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文檔之外的抽象，所以叫偽類。

 

E:link

1. 偽類將應用於未被訪問過的鏈接，與:visited互斥。

E:hover

1. 偽類將應用於有鼠標指針懸停於其上的元素。

E:active

1. 偽類將應用於被激活的元素，如被點擊的鏈接、被按下的按鈕等。

E:visited

1. 偽類將應用於已經被訪問過的鏈接，與:link互斥。

E:focus

1. 偽類將應用於擁有鍵盤輸入焦點的元素。

E:first-child

1. 偽類將應用於元素在頁面中第一次出現的時候。

E:lang

1. 偽類將應用於元素帶有指定lang的情況。

 

3. //示例

4. p:lang(zh-cmn-Hans) {

5.   color: #f00;

6. }

7. p:lang(en) {

8.   color: #090;

9. }

 

11. <p lang="zh">中國</p>

12. <p lang="en">english</p>

E:not(s)

1. 匹配不含有s選擇符的元素E。

 

3. //示例（給該列表中除最后一項外的所有列表項加一條底邊線）

4. .demo li:not(:last-child) {

5.   border-bottom: 1px solid #ddd;

6. }

E:root

1. 匹配E元素在文檔的根元素。

 

3. //示例（非IE文本將為black，IE9及以上為purple，IE8為yellow，IE7為blue，IE6為red）

4. .test {

5.   color: black;

6.   color: yellow\0;

7.   *color: blue;

8.   _color: red;

9. }

10. html:root .test {

11.   color: purple\0;

12. }

 

偽元素

與偽類針對特殊狀態的元素不同的是，偽元素是對元素中的特定內容進行操作，它所操作的層次比偽類更深了一層，也因此它的動態性比偽類要低得多。實際上，設計偽元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或后面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的，但是它本身只是基於元素的抽象，並不存在於文檔中，所以叫偽元素。

 

E::first-letter

1. 偽元素的樣式將應用於元素文本的第一個字（母）。

E::first-line

1. 偽元素的樣式將應用於元素文本的第一行。

E::before

1. 在元素內容的最前面添加新內容。

E::after

1. 在元素內容的最后面添加新內容。

 

3. // 清楚浮動示例

4. .clearfix::before, .clearfix::after {

5.   content:"";

6.   display:table;

7. }

8. .clearfix::after {

9.   clear:both;

10. }

11. .clearfix {

12.   zoom:1; /* For IE 6/7 (trigger hasLayout) */

13. }

E::placeholder

1. 用於控制表單輸入框占位符的外觀，它允許開發者/設計師改變文字占位符的樣式，默認的文字占位符為淺灰色。

 

3. // 示例

4. input::-webkit-input-placeholder {

5.   color: #999;

6. }

7. input:-ms-input-placeholder { // IE10+

8.   color: #999;

9. }

10. input:-moz-placeholder { // Firefox4-18

11.   color: #999;

12. }

13. input::-moz-placeholder { // Firefox19+

14.   color: #999;

15. }

E::selection

1. 定義元素被選擇時的background-color，color及text-shadow(IE11尚不支持定義該屬性)。

 

3. //示例（將選中字體的顏色設置為#f00，背景顏色設置為#000）

4. p::-moz-selection{background:#000;color:#f00;}

5. p::selection{background:#000;color:#f00;}

一枚不會寫文章的程序員~