【CSS基礎】僞類與僞元素的區別

引入

有同窗在使用CSS僞元素時使用 :: (雙冒號)產生疑問。 進而對：(單冒號)和::（雙冒號）的區別產生疑問。

而咱們在使用僞類僞元素的時候經常都是使用單冒號。

那麼咱們就來看看怎麼回事吧。

區別

之會有疑問，其實這是由於CSS2未遵循W3C規範，僞類和僞元素統一使用單冒號表示。

而許多人初學時養成了全都使用單冒號的習慣。

在以後的CSS3版本時候規定了僞類使用單冒號，而僞元素則使用雙冒號表示的標準

那麼順便介紹一下僞類和僞元素的是什麼吧

1、 : 僞類

CSS 僞類 是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。例如：:hover、:visited等

也有咱們常見的僞類選擇器:nth-child()、last-child

2、 :: 僞元素

而僞元素是一個附加至選擇器末的關鍵詞，容許你對被選擇元素的特定部分修改樣式。 咱們常見的包括::before、::after,相信許多同窗在學習清除浮動時都會使用到，但大多數都用的單冒號

案例演示

僞類使用

// 僞類 表明鼠標通過時候，顏色變爲淺灰
.demo:hover {
	color: #efefef;
}
複製代碼

僞元素使用

// 僞元素 表示在P標籤內容渲染前先填充一個*
p:before { // css2寫法 非標準
	content: '*'
}

p::before { // css3寫法 標準
	content: '*'
}
複製代碼

組合使用

p:first-child::before { // 選擇第一個P標籤病在內容渲染前先填充一個*
	content: '*'
}
複製代碼

總結

因爲CSS2的不規範，因此瀏覽器都作了單冒號和雙冒號的兼容。因此目前絕大多數的瀏覽器都同時支持使用這兩種方式來表示僞元素。

IE8不兼容（小聲BB）