有很多人會有疑問？為什麼要用偽類元素,再增加一個標籤不就好了？其實不然，使用偽類元素，一方面可以減少頁面中的節點元素，加速頁面渲染速度,另一方面可以為設計動畫提供很多新思維，本文先介紹一些簡單的偽類元素以及hover效果的實現:

說到偽類與偽元素，區別有以下：

1. 最根本的區別是是否有有新的元素生成，偽元素建立了新的元素，而偽類並沒有生成新的元素;
2. 可以為同一個元素新增不同的偽類效果，但一次只能實現一種效果;
3. 可以給偽類元素同時新增很多效果

常見的偽類有:

:nth-of-type類似於:nth-child，不同的是他只計算選擇器中指定的那個元素,其實我們前面的例項都是指定了具體的元素，這個選擇器主要對用來定位元素中包含了好多不同型別的元素是很有用處。比如說，我們div.demo下有好多p元素，li元素，img元素等，但我只需要選擇p元素，並讓他每隔一個p元素就有不同的樣式，那我們就可以簡單的寫成：

p:nth-of-type(even) {background-color: lime;}

:nth-child(length);/*引數是具體數字 length為整數*/

:nth-child(n);/*引數是n,n從0開始計算*/

:nth-child(n*length)/*n的倍數選擇，n從0開始算*/

:nth-child(n+length);/*選擇大於length後面的元素*/

:nth-child(-n+length)/*選擇小於length前面的元素*/

:nth-child(n*length+1);/*表示隔幾選一*/

常見的偽元素有：

<div class="main_box">今天是2018年的元月8號</div>

.main_box{
width:200px;
height:200px;
border:1px solid #ccc;
}

 div::before{
            content: '天氣真的好冷';
            color: greenyellow;
        }

偽元素新增hover:

div::before{
            content: '天氣真的好冷';
            color: greenyellow;
            display: none;
        }

        div:hover::before{
            display: block;
        }