前言
今天學習了css選擇器，發現有兩個僞類nth-of-type和nth-child在功能上十分相似，卻又有不同的地方。但我發現無論是在MDN上，還是在w3school、菜鳥教程上，對這兩個僞類選擇器的對比說的都不是很明白。這篇文章就是對這兩個僞類的簡單探究~
nth-of-type和nth-child的區別
nth-of-type和nth-child都是css3中的僞類選擇器，其功能也都是選取父元素下的直接子元素，那麼他們的區別在哪裏呢？
其實他們的區別就在type和child上。
nth-of-type的關鍵詞是type，即他關心的是類型。它不會對所有子元素生效，只會對子元素中符合選擇器要求的類型的子元素進行篩選，而忽略非選擇器要求的類型的子元素。ele:nth-of-type(n)的意義就是選擇父元素下的第n個ele類型的子元素。
nth-child的關鍵詞是child，它關心的是所有子元素。它會對所有子元素生效。ele:nth-child的意義就是選擇父元素下的第n個子元素，如果他是ele類型的，那麼對他生效，如果他不是ele類型的，則不生效。
簡而言之，nth-child影響到了所有child子元素，而nth-of-type則影響到了相應type的子元素。
例子
看一下下面代碼所示的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.test-type h1:nth-of-type(n) {
background-color: red;
}
.test-child h1:nth-child(n) {
background-color: red;
}
</style>
</head>
<body>
<div class="test-type">
<h1>ReedSun1</h1>
<h1>ReedSun2</h1>
<p>ReedSun3</p>
<h1>ReedSun4</h1>
<p>ReedSun5</p>
</div>
<div class="test-child">
<h1>ReedSun1</h1>
<h1>ReedSun2</h1>
<p>ReedSun3</p>
<h1>ReedSun4</h1>
<p>ReedSun5</p>
</div>
</body>
</html>我們來將n依次替換成1 2 3 4 5 ，運行代碼，觀察結果。
- 當n等於1和2時，我們發現，兩個div是一樣的，都是ReedSun1和ReedSun2分別背景變爲黃色。
- 當n等於3時，出現不同了，第一組中ReedSun4背景變成了黃色，而第二組中沒有元素背景變色。
- 當n等於4時，第一組中沒有元素變色，第二組中ReedSun4背景變色。
- 當n等於5時，兩組都沒有背景變色的元素。
這個代碼實驗印證了我們的結論。
- div中第三個h1子元素是ReedSun4，這就導致n等於3時第一組中是ReedSun4變色的情況。
- div一共只有三個h1子元素，所以當n等於4或5的時候，第一組元素均不會出現背景變色的情況了。
- div中1 2 4子元素是h1元素，而3 5不是，所以第二組中，n等於3或5時沒有元素背景變色，n等於1 2 4時，相應的元素背景變色。
總結
本來以爲這兩個僞類選擇器要用非常複雜的語言才能解釋清楚。現在看來，只要抓住關鍵字，也能輕鬆應對。
總之，這兩個僞類選擇器的區別就是type和child的不同，只要把握住這一點，就肯定能記住他們兩個的區別了。
共勉~