偽類和偽元素的理解
官方解釋：偽類一開始單單只是用來表示一些元素的動(dòng)態(tài)狀態(tài)，典型的就是鏈接的各個(gè)狀態(tài)(LVHA)。隨后CSS2標(biāo)準(zhǔn)擴(kuò)展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標(biāo)識(shí)的“幽靈”分類。
偽元素則代表了某個(gè)元素的子元素，這個(gè)子元素雖然在邏輯上存在，但卻并不實(shí)際存在于文檔樹中。
我自己的理解：
偽類，類，class是一個(gè)類，就類似class這樣，表示一些元素的狀態(tài)的，但是無須標(biāo)識(shí)的分類。
偽元素，就是一個(gè)元素，類似p標(biāo)簽元素，等等，邏輯上存在，但是實(shí)際并不存在在文檔樹中。
另外一個(gè)簡(jiǎn)單的理解和區(qū)分就是：
偽類前面是一個(gè)冒號(hào)，為元素前面是兩個(gè)冒號(hào)。E:first-child 偽類，E::first-line為元素。
特殊情況::before 和 ::after 偽元素
before 和after是在元素前面和后面添加一些元素，因此是偽元素，CSS3選擇器中已經(jīng)將其前面變?yōu)閮蓚€(gè)冒號(hào)了。請(qǐng)看：w3cselect
問題來了，那么為什么我們平時(shí)用before和after前面就一個(gè)冒號(hào)？
CSS1和CSS2中對(duì)偽類的偽元素的區(qū)別比較模糊，甚至經(jīng)常有同行將:before、:after稱為偽類。老的規(guī)范中，偽類和偽元素都用一個(gè)冒號(hào)，新規(guī)范為了區(qū)分，偽元素統(tǒng)一用兩個(gè)“：：”,所以，大家注意了，往后在寫css3的時(shí)候，為元素要用兩個(gè)冒號(hào)，偽類用一個(gè)冒號(hào)。
偽類和偽元素的應(yīng)用
我之前的css常用效果，講了一些。
像偽元素
::-webkit-scrollbar
::selection
::-webkit-input-placeholder
::after
等等。
偽元素中用的多的要數(shù)::after和::before了
可以用這兩個(gè)偽元素做很多效果！
html
<a href="#">haorooms</a>
css
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "5B"; left: -20px; }
a:hover::after { content: "5D"; right: -20px; }
例如：
a：:after { content:"(" attr(href) ")"; }
h1::before { content: url(logo.png); }
nth-child()瀏覽器支持
IE9及以上版本，火狐，谷歌，Safari ，Opera都支持！
定義和用法
:nth-child(n) 選擇器匹配屬于其父元素的第 n個(gè)子元素，不論元素的類型。
n 可以是數(shù)字、關(guān)鍵詞或公式。
例如：
p:nth-child(2)
{
background:#ff0000;
}
<body>
<h1>這是標(biāo)題</h1>
<p>haorooms個(gè)段落。</p>
<p>haorooms第二個(gè)段落。</p>
<p>haorooms第三個(gè)段落。</p>
<p>haorooms第四個(gè)段落。</p>
</body>
答案是“haorooms個(gè)段落。”顏色變成了紅色！
解釋：:nth-child(n) 選擇器匹配屬于其父元素的第 n個(gè)子元素，不論元素的類型。p:nth-child(2),P標(biāo)簽的父元素是body，body的第二個(gè)子元素是“haorooms個(gè)段落。”所以haorooms個(gè)段落顏色變?yōu)榱思t色！！！
注意
很多朋友經(jīng)常把:nth-child() 和:nth-of-type()混淆。
CSS3 E:nth-of-type() 選擇器的意思是“選擇E同類型的同級(jí)的 第n個(gè)元素“
”
看下面的例子：
p:nth-of-type(2)
{
background:#ff0000;
}
<body>
<h1>這是標(biāo)題</h1>
<p>haorooms個(gè)段落。</p>
<p>haorooms第二個(gè)段落。</p>
<p>haorooms第三個(gè)段落。</p>
<p>haorooms第四個(gè)段落。</p>
</body>
代碼一樣，我的樣式僅僅是把 p:nth-child(2)改成了 p:nth-of-type(2)，現(xiàn)在就是“haorooms第二個(gè)段落。”顏色變成了紅色。
奇偶數(shù)匹配
現(xiàn)在開始說說我開通說的table的tr偶數(shù)行變色的問題了。
因?yàn)閠able的子元素一般是tr，不會(huì)有別的，所以可以用
tr:nth-child(odd) 與 tr:nth-child(even)
當(dāng)然也可以用
tr:nth-of-type(odd) tr:nth-of-type(even)
倍數(shù)寫法
:nth-child(an) 【:nth-of-type(an)同理，不解釋】
匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省，它是倍數(shù)寫法的標(biāo)志，如3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數(shù)的LI的背景設(shè)為橙色*
延伸
:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，還可以 :nth-child(-an+b)也就是反向匹配。
，總結(jié)一下偽類與偽元素的特性及其區(qū)別：
偽類本質(zhì)上是為了彌補(bǔ)常規(guī)CSS選擇器的不足，以便獲取到更多信息；
偽元素本質(zhì)上是創(chuàng)建了一個(gè)有內(nèi)容的虛擬容器；
CSS3中偽類和偽元素的語法不同；
可以同時(shí)使用多個(gè)偽類，而只能同時(shí)使用一個(gè)偽元素