關於偽類選擇器中一個冒號和兩個冒號的區別

只要兼容現代瀏覽器如 webkit、firefox、opera等瀏覽器，對於偽元素采用雙冒號的寫法，要是非要兼容IE瀏覽器，用CSS2的單冒號寫法比較安全。

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

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

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

偽類種類

偽元素種類

 

<div class="gradient"></div>
<style>
.gradient {
    position:relative;
    width:100px;height:100px;
    background:red;
}
.gradient:before{
    content:"台詞1：-";
    background:blue;
    color:#fff;
    width:50px;height:50px;
    position:absolute;left:0;top:0;
}
.gradient::before{ 
    content:"台詞2：-";
    color:#fff;
}
</style>

　　

現代瀏覽器

IE8