CSS 選擇器前面單雙冒號:

admin發表於2019-06-13
CSS

在偽元素與偽類選擇器的前面會有冒號的使用。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
a:hover{
  color:blue;
} 
li:before{
  content:"螞蟻部落";
  color:red;
}

程式碼分析如下：

（1）.:hover是偽類選擇器，前面是一個冒號。

（2）.:before是偽元素選擇器，前面也是一個冒號。

不過CSS3規定，偽元素選擇器前面需要加兩個冒號，以便於與偽類選擇器區別。

所以上述程式碼中偽元素選擇器推薦的寫法如下：

[CSS] 純文字檢視 複製程式碼
li::before{
  content:"螞蟻部落";
  color:red;
}

但是由於在CSS3之前就存在偽元素選擇器，所以為了相容低版本瀏覽器。

偽元素選擇器前面可以使一個冒號也可以是兩個冒號，如果不考慮低版本瀏覽器，推薦用兩個冒號。

相關文章