什么是偽類和偽元素
偽類用于當(dāng)已有元素處于的某個狀態(tài)時荧降，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的捞镰。比如說我們常用的懸停怖竭，我們可以通過:hover來描述這個元素的狀態(tài)。雖然它和普通的css類相似叉谜，可以為已有的元素添加樣式旗吁，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類停局。
偽元素用于創(chuàng)建一些不在文檔樹中的元素很钓，并為其添加樣式。比如說董栽，我們可以通過:before來在一個元素前增加一些文本码倦，并為這些文本添加樣式。雖然用戶可以看到這些文本锭碳，但是這些文本實際上不在文檔樹中袁稽。
給第一項添加樣式：
<ul>
<li v-for="(item, index) in dataArr" :key="index">{{ item }}</li>
<li v-for="(item,index) in dataArr" :calss="index==0?'first-item':''">{{item}}</li>
</ul>
li:first-child {
color: orange;
}
li.first-item {
color: orange;
}
給段落的第一個字母添加樣式
<p>Hello World</p>
<p><span class="first">H</span>ello World</p>
p:first-letter {
font-size: 5em;
}
.first {
font-size: 5em;
}
從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素擒抛，而偽元素則創(chuàng)建了一個文檔數(shù)外的元素运提。因此蝗柔，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個文檔樹之外的元素。
我們常用的偽類
狀態(tài)偽類：是基于元素當(dāng)前狀態(tài)進行選擇的民泵。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的癣丧，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。當(dāng)元素處于某狀態(tài)時會呈現(xiàn)該樣式栈妆，而進入另一狀態(tài)后胁编，該樣式也會失去。
常見的狀態(tài)偽類主要包括：
- :link 應(yīng)用于未被訪問過的鏈接鳞尔；
- :hover 應(yīng)用于鼠標(biāo)懸停到的元素嬉橙；
- :active 應(yīng)用于被激活的元素；
- :visited 應(yīng)用于被訪問過的鏈接寥假，與:link互斥市框。
- :focus 應(yīng)用于擁有鍵盤輸入焦點的元素。
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
結(jié)構(gòu)性偽類：是css3新增選擇器糕韧，利用dom樹進行元素過濾枫振，通過文檔結(jié)構(gòu)的互相關(guān)系來匹配元素，能夠減少class和id屬性的定義萤彩，使文檔結(jié)構(gòu)更簡潔粪滤。
:not是一個否定偽類，用于匹配不符合參數(shù)選擇器的元素雀扶。
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
li:not(.first-item) {
color: orange;
}
:first-child用于匹配元素的第一個子元素杖小。
: last-child用于匹配元素的最后一個子元素。
：first-of-type用于匹配屬于其父元素的首個特定類型的子元素的每個元素愚墓。
:last-of-type用于匹配元素的最后一個子元素予权。
:nth-child根據(jù)元素的位置匹配一個或者多個元素，它接受一個an+b形式的參數(shù)浪册，an+b匹配到的元素示例如下：
1n+0扫腺，或n，匹配每一個子元素议经。
2n+0，或2n谴返，匹配位置為2煞肾、4、6嗓袱、8…的子元素籍救，該表達式與關(guān)鍵字even等價。
2n+1匹配位置為1渠抹、3蝙昙、5闪萄、7…的子元素、該表達式與關(guān)鍵字odd等價奇颠。
3n+4匹配位置為4败去、7、10烈拒、13…的子元素圆裕。
:nth-last-child與:nth-child相似，不同之處在于它是從最后一個子元素開始計數(shù)的荆几。
:nth-of-type與nth-child相似吓妆，不同之處在于它是只匹配特定類型的元素。
<div class="domIndex">
<h1>這是標(biāo)題</h1>
<p>第一個段落吨铸。</p>
<p>第二個段落行拢。</p>
<p>第三個段落。</p>
<p>第四個段落诞吱。</p>
<p>第五個段落舟奠。</p>
</div>
p:nth-of-type(2) {//該類型的第n個孩子
background: red;
}
p:nth-child(2) {
//父元素下第n個孩子，與類型無關(guān)
background: red;
}
偽元素
::selection應(yīng)用于文檔中被用戶高亮的部分（比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分）改變字體大小狐胎，添加背景色等等,在火狐瀏覽器使用時需要添加-moz前綴鸭栖。該偽元素只支持雙冒號的形式；
.select {
::selection {
color: red;
background-color: yellow;
}
}
::placeholder匹配占位符的文本握巢，只有元素設(shè)置了placeholder屬性時晕鹊，該偽元素才能生效;為了瀏覽器兼容性，一般寫為： input::-webkit-input-placeholder,這個兼容性不太好暴浦，ie11無法兼容溅话。
input::-moz-placeholder {
color:#666;
}
input::-webkit-input-placeholder {
color:#666;
}
/* IE 10 only */
input:-ms-input-placeholder {
color:#666;
}
/* Firefox 18 and below */
input:-moz-input-placeholder {
color:#666;
}
::backdorp是在任何處于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的層級更低的元素之上）,用于改變?nèi)聊Ｊ较碌谋尘邦伾聊Ｊ降哪J(rèn)顏色為黑色歌焦。該偽元素只支持雙冒號的形式,該偽類用得少飞几，兼容性差，甚至許多瀏覽器并未使用該功能）
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
h1:fullscreen::backdrop {
background: orange;
}
CSS3規(guī)范中的要求使用雙冒號(::)表示偽元素独撇，以此來區(qū)分偽元素和偽類屑墨，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)纷铣。除了一些低于IE8版本的瀏覽器外卵史，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法搜立。
