1. 程式人生 > >關於偽類選擇器中一個冒號和兩個冒號的區別

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

fault 兼容 content 中一 radi view get top AD

只要兼容現代瀏覽器如 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

技術分享圖片

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