天天看點

CSS中的單冒号和雙冒号(僞類及僞元素)css中的單冒号和雙冒号

css中的單冒号和雙冒号

最近突然被别人問起css單冒号和雙冒号有什麼差別,答曰:“不知道”。

雖然還在填坑中,但作為一個跨過了初級的FEer,感覺着實汗顔,剛好今天下午在搜别的問題的時候,突然看到一個對比,嗯,我覺得寫得還不錯,暫時沒有自己總結,是以先轉了。

1、僞類與僞元素

CSS中的單冒号和雙冒号(僞類及僞元素)css中的單冒号和雙冒号

CSS僞元素:用于将特殊的效果添加到某些選擇器。僞元素代表了某個元素的子元素,這個子元素雖然在邏輯上存在,但卻并不實際存在于文檔樹中。

CSS中的單冒号和雙冒号(僞類及僞元素)css中的單冒号和雙冒号

僞類的效果可以通過添加一個實際的類來達到,而僞元素的效果則需要通過添加一個實際的元素才能達到,這也是為什麼他們一個稱為僞類,一個稱為僞元素的原因。

CSS3為了區分僞類和僞元素,已經明确規定了僞類用一個冒号來表示,而僞元素則用兩個冒号來表示。但因為相容性的問題,是以現在大部分還是統一的單冒号,但是抛開相容性的問題,我們在書寫時應該盡可能養成好習慣,區分兩者。

單冒号(:)用于css3僞類,雙冒号(::)用于CSS3僞元素。僞元素由雙冒号和僞元素名稱組成。不過浏覽器需要同時支援舊的已經存在的僞元素寫法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的僞元素則不允許再支援舊的單冒号的寫法。

2、CSS3新增僞類

CSS中的單冒号和雙冒号(僞類及僞元素)css中的單冒号和雙冒号