玩轉CSS3,嗨翻WEB前端,CSS3偽類元素詳解/深入淺出[原創][5+3時代]

在我的上一篇博客中， 很多園友提出說對css3"畫圖"不是很理解， 在跟他們私聊了一段時間以后，加上自己在開始自學css3的時候的疑惑，我覺得大家之所以不是很理解主要是因為對偽元素不太了解，介於畫圖和CSS3里一些高大上的特效用的比較廣泛的偽類元素就是::before 和 ::after， 寫這篇博客主要也是為了起到一個敲門磚的作用，所以本篇博客主要是講::before 和 ::after。那么就讓我們一起來聊聊偽元素吧。

2.CSS歷史

偽元素實際上在CSS1(CSS1發布於 1996年12月17 日。1999 年1月11日，此推薦被重新修訂)中就存在了，只不過在后來的瀏覽器爭霸時代發生了很多的演變。。在最初，偽元素的語法是使用“:”（一個冒號），隨着web的發展，在CSS3中修訂后的偽元素使用“::”（兩個冒號），也就是::before 和 ::after—以區分偽元素和偽類（比如:hover，:active等）。不過索性無論你寫一個冒號還是兩個冒號，瀏覽器都將能識別它們。由於IE8(千瘡百孔的IE你不懂，現在覺得最應該致敬的是那些做web開發還需要兼容IE6的程序猿們)只支持單冒號的格式，安全起見如果你想要更廣泛的瀏覽器兼容性那么還是使用單冒號的格式吧！

3.偽元素概念

相信到這很多人都不知道偽元素到底是干嘛的？它的作用到底是做什么的，下面就讓我們一起來揭開偽元素的神秘的面紗，探索偽元素背后那不為人知的故事。

偽元素直義理解就是"假元素"或者"偽裝元素"。其實也可以這么理解， 偽元素實際上就是虛擬的元素，不存在的元素(code形式), 你也無發在文檔中找到他們，因此說偽元素是虛擬元素。

4.偽元素作用

盡管作為“虛假”的元素，事實上偽元素表現上就像是“真正”的元素，我們能夠給它們添加任何樣式，比如改變它們的顏色、添加背景色、調整字體大小、調整它們中的文本等等。CSS 偽元素主要用於向某些選擇器設置特殊效果。

5.偽元素用法

好了，標准的博客流程(就是前奏得揍很久，一大堆各種亂八七糟的介紹，其實我也不喜歡這些東西，但是為了向園子的大神們看近，也增加大家對偽元素的理解。 so，我們也走了一遍流程。)已經走完了。下面讓我們一起來看看偽元素的用法

5.1簡單例子

首先通過一個最最簡單的例子， 來告訴大家:before和:after到底是個什么東東。

<style>
    .cnblogsDemo1:before {
            content: '向錢看';
        }

/*****  原文出自 博客園 請叫我頭頭哥： www.cnblogs.com/toutou  ******/

.cnblogsDemo1:after { content: '向厚看'; } </style> <div class="cnblogsDemo1"> 這里1 </div>

 

效果：

    運行效果是： 向錢看 這里 向厚看， 而且"向錢看"/"向厚看"實際上是不存在的，而且這種虛假的元素在頁面(測試的是谷歌瀏覽器)上.是無法直接復制的, 我們只是通過偽元素實現了這個"向錢看"/"向厚看"。相信看到這里大家對偽元素心里已經有了一個概念了，其實在偽元素里，我們不光可以"向錢看"/"向厚看"，我們可以通過偽元素做很多事情。

5.2水滴例子

 

比如我們簡單實現一個水滴(比如百度地圖上標記你當前位置的圖標)的效果, 實現水滴效果呢我們分為三步走。

5.2.1首先實現畫一個圓形

　　

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo2 {
            height: 26px;
            width: 26px;
            border-radius: 40px;
            -webkit-border-radius: 40px;    /* Safari and Chrome */
            -moz-border-radius: 40px;       /* Firefox */
            background: #333;

/*****  原文出自 博客園 請叫我頭頭哥： www.cnblogs.com/toutou  ******/

        }
</style>
<span class="cnblogsDemo2">
        
</span>

 效果:

5.2.2實現畫一個三角形

<style>
.cnblogsDemo3 {
            height: 0px;
            width: 0px;
            border: 10px transparent solid;
            border-top-color: #333;
            border-width: 15px 10px 0px 10px;
        }
</style>
<span class="cnblogsDemo3">

</span>

/*****  原文出自 博客園 請叫我頭頭哥： www.cnblogs.com/toutou  ******/

效果：

5.2.3水滴實現

可能到這里很多園友都感覺到講圓形和三角形有機結合的話其實就是一個水滴的效果，沒錯，在有:before和:after的幫助下，我們想實現水滴效果就非常簡單了，只需要將二者有效的結合。

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo4 {
            width: 26px;
        }

            .cnblogsDemo4:before {
                content: '4';
                height: 26px;
                width: 26px;
                display: block;
                position: absolute;
                top: 2px;
                left: 0px;
                z-index: 1;
                line-height: 26px;
                background: #333;
                border-radius: 40px;
                -webkit-border-radius: 40px;
                -moz-border-radius: 40px;
                color: #fff;
                text-align: center;
            }

            .cnblogsDemo4:after {
                content: '';
                height: 0px;
                width: 0px;
                display: block;
                position: absolute;
                bottom: 2px;
                left: 3px;
                border: 10px transparent solid;
                border-top-color: #333;
                border-width: 15px 10px 0px 10px;
            }
</style>
<span class="cnblogsDemo4">
    </span>

效果：

 水滴效果其實原理很簡單，只是在:before和:after的基礎上加一些定位，然后就可以將圓形和三角形有機結合成水滴，這個效果只是燈紅酒綠的CSS3世界里最簡單的一個實例，只是希望通過這個簡單的實例讓園友們領略到css3的風韻，從而了解或者喜歡CSS3.

6.總結

css的偽元素還有很多很多，這里就不全部列舉了，需要我們一起慢慢去探索。CSS在有效的結合各種東東之后，其實可以實現很多高大上的效果，尤其是現在的[5+3]時代，更是所向披靡。

想了解更多css demo有興趣的園友可以看我的上一篇博客，只希望這篇博客對大家學習web前端起到一點點推波助瀾的效果。

 

作　　者：請叫我頭頭哥
出　　處：http://www.cnblogs.com/toutou/
關於作者：專注於基礎平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角“推薦”一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！