玩轉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/
關於做者：專一於基礎平臺的項目開發。若有問題或建議，請多多賜教！
版權聲明：本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。
特此聲明：全部評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我 聲援博主：若是您以爲文章對您有幫助，能夠點擊文章右下角「推薦」一下。您的鼓勵是做者堅持原創和持續寫做的最大動力！