偽類和虛擬元素的理解
官方解釋
偽類一開始單單只是用來表示一些元素的動態狀態，典型的就是連結的各個狀態(LVHA)。隨後CSS2標準擴充了其概念範圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。
虛擬元素則代表了某個元素的子項目，這個子項目雖然在邏輯上存在，但卻並不實際存在於文檔樹中。
我自己的理解：
偽類，類，class是一個類，就類似class這樣，表示一些元素的狀態的，但是無須標識的分類。
虛擬元素，就是一個元素，類似p標籤元素，等等，邏輯上存在，但是實際並不存在在文檔樹中。
另外一個簡單的理解和區分就是：
偽類前面是一個冒號，為元素前面是兩個冒號。E:first-child 偽類，E::first-line為元素。
特殊情況::before 和 ::after 虛擬元素
before 和after是在元素前面和後面添加一些元素，因此是虛擬元素，CSS3選取器中已經將其前面變為兩個冒號了。請看：w3cselect
問題來了，那麼為什麼我們平時用before和after前面就一個冒號？
當你看了css2選取器就知道了，老的規範中，偽類和虛擬元素都用一個冒號，新規範為了區分，虛擬元素統一用兩個“：：”,所以，大家注意了，往後在寫css3的時候，為元素要用兩個冒號，偽類用一個冒號。
偽類和虛擬元素的應用
我之前的css常用效果，講了一些。
像虛擬元素
::-webkit-scrollbar
::selection
::-webkit-input-placeholder
::after
等等。
虛擬元素中用的最多的要數::after和::before了
可以用這兩個虛擬元素做很多效果！
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; }
其中content中可以用attr也可以用url
例如：
a：:after { content:"(" attr(href) ")"; }
h1::before { content: url(logo.png); }
偽類中用的最多的要數：nth-child()選取器了，關於nth-child()，我們看下文
nth-child()瀏覽器支援
IE9及以上版本，Firefox，Google，Safari ，Opera都支援！
定義和用法
:nth-child(n) 選取器匹配屬於其父元素的第 n個子項目，不論元素的類型。
n 可以是數字、關鍵詞或公式。
例如：
p:nth-child(2)
{
background:#ff0000;
}
<body>
<h1>這是標題</h1>
<p>haorooms第一個段落。</p>
<p>haorooms第二個段落。</p>
<p>haorooms第三個段落。</p>
<p>haorooms第四個段落。</p>
</body>
上面這段代碼請問那個段落顏色是紅色的？
答案是“haorooms第一個段落。”顏色變成了紅色！
解釋：:nth-child(n) 選取器匹配屬於其父元素的第 n個子項目，不論元素的類型。p:nth-child(2),P標籤的父元素是body，body的第二個子項目是“haorooms第一個段落。”所以haorooms第一個段落顏色變為了紅色！！！
注意
很多朋友經常把:nth-child() 和:nth-of-type()混淆。
CSS3 :nth-of-type() 選取器的意思是“規定屬於其父元素的第二個 p 元素”
看下面的例子：
p:nth-of-type(2)
{
background:#ff0000;
}
<body>
<h1>這是標題</h1>
<p>haorooms第一個段落。</p>
<p>haorooms第二個段落。</p>
<p>haorooms第三個段落。</p>
<p>haorooms第四個段落。</p>
</body>
代碼一樣，我的樣式僅僅是把 p:nth-child(2)改成了 p:nth-of-type(2)，現在就是“haorooms第二個段落。”顏色變成了紅色。
奇偶數匹配
現在開始說說我開通說的table的tr偶數行變色的問題了。
因為table的子項目一般是tr，不會有別的，所以可以用
tr:nth-child(odd) 與 tr:nth-child(even)
當然也可以用
tr:nth-of-type(odd) tr:nth-of-type(even)
分別匹配序號為奇數與偶數的元素。奇數(odd)與(2n+1)結果一樣；偶數(even)與(2n+0)及(2n)結果一樣。
倍數寫法
:nth-child(an) 【:nth-of-type(an)同理，不解釋】
匹配所有倍數為a的元素。其中參數an中的字母n不可預設，它是倍數寫法的標誌，如3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數的LI的背景設為橙色*
延伸
:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，還可以 :nth-child(-an+b)也就是反向匹配。
總之，你可以用了:nth-child偽類，可以對多個標籤有規律的進行不同的顯示，顯示出CSS3的強大。css3需要多用，熟能生巧，在書寫的時候，經常會把一些css3的屬性忘掉，你可以多手寫幾遍。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
