剛開始學習選擇器，一開始對偽類選擇器確實有點懵。昨天晚上自己動手寫了寫，終于是慢慢搞懂了。下面對一些容易誤解的一些知識點做個總結，便于以后復習和查閱。
一.E:first-child
- 我們先來看看
:first-child，一開始我就對這個偽類選擇器誤解了，以為只是選擇某個元素的第一個子元素。舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偽類選擇器</title>
<style>
p:first-child{
color: yellow;
}
li:first-child{
background: #ccc;
}
span:first-child{
color: red;
}
</style>
</head>
<body>
<div>
<h3> <em>My</em> <span>goal</span></h3>
<p>Next stage</p>
<ol>
<li>Learn the front knowledge.</li>
<li>Find a satisfactory internship.</li>
<li>Find a <span>good job</span> when graduating.</li>
</ol>
<p>Come on!</p>
</div>
</body>
</html>
我們可以事先想一下結果會是什么。
先分析一下。在上面的例子中作為某個父元素的第一個子元素的有：第一個h3、第一個em、第一個span、第一個p、第一個li。
再來看看第一個樣式，p:first-child{color: yellow;}，它的意思不是說要把p元素的第一個元素變成黃色,而是說把作為某個元素第一個子元素的所有p元素設置為黃色。也就是說它必須要滿足兩個條件：第一，必須為p標簽；第二，必須要為某個父元素的第一個子元素。按照這么說來，例子中沒有符合條件的p標簽。
然后再來看看第二個樣式，li:first-child{background: #ccc;},將作為某個元素（ol或者ul）的第一個子元素li設置背景色為灰色，顯而易見，有符合條件的li元素，那就是<li>Learn the front knowledge.</li>。
最后再來看看第三個樣式，span:first-child{color: red;}，它就是說把作為某個元素第一個子元素是span的元素顏色變為紅色。從上面的例子來看，span有兩次出現。第一次是作為h3的第二個子元素，所以不滿足要求。再來看看第二個span，它是作為li的第一個子元素，滿足了兩個條件，所以肯定會變成紅色。
結果和預想的完全吻合：
- 為了加深理解咱們再來舉兩例：
- 例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child</title>
<style>
.fruit p:first-child{
color: red;
}
.fruit > p:first-child{
text-align: center;
}
</style>
</head>
<body>
<div class="fruit">
<p>There are many fruit.For example:</p>
<ul>
<li>grape</li>
<li>banana</li>
<li>watermelon <p>and so on.</p></li>
</ul>
<p>Which is your favorite?</p>
</div>
</body>
</html>
上面的代碼中寫了兩個樣式，其中會牽扯到組合選擇器。我們先來看看第一個，.fruit p:first-child{color: red;}。這是一個后代選擇器，這在我的另一篇博客：CSS選擇器當中做過說明。它用來匹配.fruit的所有后代（不只是子元素、還包括子元素向下遞歸），而在這里后代的要求為：必須是p元素且必須為某個元素的第一個子元素。這樣說來滿足要求的就是：
<p>There are many fruit.For example:</p>和<p>and so on.</p>，所以結果是把它們渲染為紅色。再來看看第二個樣式，.fruit > p:first-child{text-align: center;}。這是一個直接子元素選擇器，它用來匹配.fruit的直接子元素（不包括向下遞歸的元素，而是同一層級的第一層子元素。），而直接子元素的要求為：必須是p元素且必須為某個元素的第一個子元素。這樣說來滿足要求的就是：<p>There are many fruit.For example:</p>。
再來看看結果，和預想的完全一樣。
- 例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child</title>
<style>
p:first-child span{
font-weight: bold;
}
</style>
</head>
<body>
<div class="hello">
<p><em>Hello</em>,my name is <span>cao tingting</span>.I'm a <span>new-comer</span> here and relly <span>appreciate</span> your advice.</p>
</div>
</body>
</html>
例2中只有一個樣式，它表示什么意思呢？p:first-child span，首先找到某個元素第一個子元素是p的標簽，再來找到p里面所有的<span>。那么顯而易見，在這個例子中就是<span>cao tingting</span>、<span>new-comer</span>以及<span>new-comer</span>，將他們設置粗體。
總結：E:first-child要滿足兩個條件。第一：必須是E元素；第二：必須要是某元素的第一個子元素。
二.E:first-of-type
這個偽類選擇器的含義就是匹配父元素下使用同種標簽的第一個子元素（等同于:nth-of-type(1)），它和E:first-child不一樣。它主要強調同種類的標簽中的第一個而不管這類標簽是否是第一個出現。也就是說先找出所有的E元素再找到第一個。下面來舉個例子進行說明，我們就用第一個例子來說明，以便進行對比。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偽類選擇器</title>
<style>
p:first-child{
background: #ccc;
}
p:first-of-type{
color: red;
}
</style>
</head>
<body>
<div>
<h3><em>My</em> <span>goal</span></h3>
<p>Next stage</p>
<ol>
<li>Learn the front knowledge.</li>
<li>Find a satisfactory internship.</li>
<li>Find a <span>good job</span> when graduating.</li>
</ol>
<p>Come on!</p>
</div>
</body>
</html>
前面已經分析過為什么p:first-child會沒有效果，咱們再來看看p:first-of-type，首先找出所有的p元素，再來看看第一個是誰，這里面就是<p>Next stage</p>，所以它渲染為紅色。
總結：E:first-of-type強調的是以元素種類劃分，即先找到所有的E元素，再來找到第一個。
三.以此類推的E:nth-child(n)和E:nth-of-type(n)等等
關于n的取值，它可以為： 1，2，3，4，5； 2n+1, 2n, 4n-1； odd, even。
nth-child(n)
它表示匹配其父元素的第n個子元素，第一個編號為1。如果第n個子元素為E，則被選中。它其實和E:first-child是一個原理，都要滿足上面提到的兩個條件。
與E:first-child原理相同的還有：
E:nth-last-child(n),表示匹配其父元素的倒數第n個子元素，第一個編號為1；
E:last-child，表示匹配父元素的最后一個子元素，等同于:nth-last-child(1)；E:nth-of-type(n)
它表示匹配同一種類標簽的第n個子元素。它的原理和E:first-of-type一樣。
與E:first-of-type原理相同的還有：
E:nth-last-of-type(n)，表示匹配作為某個元素子元素E（只計算使用同種標簽的元素）的倒數第n個元素。
E:first-of-type：匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
為了看的更明顯，再來舉個例子吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對比</title>
<style>
span:nth-child(2n){
background: yellow;
}
span:nth-of-type(2n){
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h3>標題</h3>
<span>內容1</span>
<span>內容2</span>
<p>這是一個<span>很長</span>的<span>段落。</span></p>
</div>
<ol>
<li>列表<span>內容</span></li>
<li>列表內容</li>
<li>列表內容</li>
</ol>
</div>
</body>
</html>
結果也是可以預料的。
到此為止應該對這一塊都很清楚了吧。
再來補充幾點用法
四.感知子元素的個數
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
color: red
}
:nth-last-child(n+4)這一個選擇器的意思就是倒數第四個以及之前的元素，后面加了~ li，就是表示符合前面條件的元素之后的li元素。
如果總數不夠四個，就不會選擇任何元素。
但是如果只用~ li，是不會匹配到第一個li的，所以又加上了li:nth-last-child(n+4):first-child。
實現了根據元素個數的多少來應用不同的樣式。
