剛開始學(xué)習(xí)選擇器，一開始對偽類選擇器確實有點懵仿贬。昨天晚上自己動手寫了寫纽竣，終于是慢慢搞懂了。下面對一些容易誤解的一些知識點做個總結(jié)茧泪，便于以后復(fù)習(xí)和查閱蜓氨。
一.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>
我們可以事先想一下結(jié)果會是什么。
先分析一下嗜侮。在上面的例子中作為某個父元素的第一個子元素的有：第一個h3港令、第一個em、第一個span棘钞、第一個p缠借、第一個li。
再來看看第一個樣式宜猜，p:first-child{color: yellow;}泼返，它的意思不是說要把p元素的第一個元素變成黃色,而是說把作為某個元素第一個子元素的所有p元素設(shè)置為黃色。也就是說它必須要滿足兩個條件：第一姨拥，必須為p標簽绅喉；第二，必須要為某個父元素的第一個子元素叫乌。按照這么說來柴罐，例子中沒有符合條件的p標簽。
然后再來看看第二個樣式憨奸，li:first-child{background: #ccc;},將作為某個元素（ol或者ul）的第一個子元素li設(shè)置背景色為灰色革屠，顯而易見，有符合條件的li元素排宰，那就是<li>Learn the front knowledge.</li>似芝。
最后再來看看第三個樣式，span:first-child{color: red;}板甘，它就是說把作為某個元素第一個子元素是span的元素顏色變?yōu)榧t色党瓮。從上面的例子來看，span有兩次出現(xiàn)盐类。第一次是作為h3的第二個子元素寞奸，所以不滿足要求呛谜。再來看看第二個span，它是作為li的第一個子元素枪萄，滿足了兩個條件隐岛，所以肯定會變成紅色。
結(jié)果和預(yù)想的完全吻合：
- 為了加深理解咱們再來舉兩例：
- 例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>饥伊，所以結(jié)果是把它們渲染為紅色。再來看看第二個樣式蔫饰，.fruit > p:first-child{text-align: center;}琅豆。這是一個直接子元素選擇器，它用來匹配.fruit的直接子元素（不包括向下遞歸的元素篓吁，而是同一層級的第一層子元素茫因。），而直接子元素的要求為：必須是p元素且必須為某個元素的第一個子元素杖剪。這樣說來滿足要求的就是：<p>There are many fruit.For example:</p>冻押。
再來看看結(jié)果，和預(yù)想的完全一樣盛嘿。
- 例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>，將他們設(shè)置粗體蚤认。
總結(jié)：E:first-child要滿足兩個條件米苹。第一：必須是E元素；第二：必須要是某元素的第一個子元素砰琢。
二.E:first-of-type
這個偽類選擇器的含義就是匹配父元素下使用同種標簽的第一個子元素（等同于:nth-of-type(1)）蘸嘶，它和E:first-child不一樣良瞧。它主要強調(diào)同種類的標簽中的第一個而不管這類標簽是否是第一個出現(xiàn)。也就是說先找出所有的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>
前面已經(jīng)分析過為什么p:first-child會沒有效果赞庶，咱們再來看看p:first-of-type，首先找出所有的p元素澳骤，再來看看第一個是誰歧强，這里面就是<p>Next stage</p>瘩扼，所以它渲染為紅色秩命。
總結(jié)：E:first-of-type強調(diào)的是以元素種類劃分齐婴，即先找到所有的E元素涮因，再來找到第一個浴讯。
三.以此類推的E:nth-child(n)和E:nth-of-type(n)等等
關(guā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),表示匹配其父元素的倒數(shù)第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（只計算使用同種標簽的元素）的倒數(shù)第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>內(nèi)容1</span>
<span>內(nèi)容2</span>
<p>這是一個<span>很長</span>的<span>段落。</span></p>
</div>
<ol>
<li>列表<span>內(nèi)容</span></li>
<li>列表內(nèi)容</li>
<li>列表內(nèi)容</li>
</ol>
</div>
</body>
</html>
結(jié)果也是可以預(yù)料的硼一。
到此為止應(yīng)該對這一塊都很清楚了吧累澡。
再來補充幾點用法
四.感知子元素的個數(shù)
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
color: red
}
:nth-last-child(n+4)這一個選擇器的意思就是倒數(shù)第四個以及之前的元素，后面加了~ li般贼，就是表示符合前面條件的元素之后的li元素愧哟。
如果總數(shù)不夠四個，就不會選擇任何元素哼蛆。
但是如果只用~ li蕊梧，是不會匹配到第一個li的，所以又加上了li:nth-last-child(n+4):first-child人芽。
實現(xiàn)了根據(jù)元素個數(shù)的多少來應(yīng)用不同的樣式望几。
