前言
今天學(xué)習(xí)了css選擇器，發(fā)現(xiàn)有兩個偽類nth-of-type和nth-child在功能上十分相似徘溢，卻又有不同的地方吞琐。但我發(fā)現(xiàn)無論是在MDN上捆探，還是在w3school、菜鳥教程上站粟，對這兩個偽類選擇器的對比說的都不是很明白黍图。這篇文章就是對這兩個偽類的簡單探究~
nth-of-type和nth-child的區(qū)別
nth-of-type和nth-child都是css3中的偽類選擇器，其功能也都是選取父元素下的直接子元素奴烙，那么他們的區(qū)別在哪里呢助被？
其實(shí)他們的區(qū)別就在type和child上。
nth-of-type的關(guān)鍵詞是type切诀，即他關(guān)心的是類型恰起。它不會對所有子元素生效，只會對子元素中符合選擇器要求的類型的子元素進(jìn)行篩選趾牧，而忽略非選擇器要求的類型的子元素检盼。ele:nth-of-type(n)的意義就是選擇父元素下的第n個ele類型的子元素。
nth-child的關(guān)鍵詞是child翘单，它關(guān)心的是所有子元素吨枉。它會對所有子元素生效。ele:nth-child的意義就是選擇父元素下的第n個子元素哄芜，如果他是ele類型的貌亭，那么對他生效，如果他不是ele類型的认臊，則不生效圃庭。
簡而言之，nth-child影響到了所有child子元素失晴，而nth-of-type則影響到了相應(yīng)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 ，運(yùn)行代碼涂屁，觀察結(jié)果书在。
- 當(dāng)n等于1和2時，我們發(fā)現(xiàn)拆又，兩個div是一樣的儒旬，都是ReedSun1和ReedSun2分別背景變?yōu)辄S色。
- 當(dāng)n等于3時帖族，出現(xiàn)不同了栈源，第一組中ReedSun4背景變成了黃色，而第二組中沒有元素背景變色竖般。
- 當(dāng)n等于4時甚垦，第一組中沒有元素變色，第二組中ReedSun4背景變色。
- 當(dāng)n等于5時制轰，兩組都沒有背景變色的元素。
這個代碼實(shí)驗(yàn)印證了我們的結(jié)論胞谭。
- div中第三個h1子元素是ReedSun4垃杖，這就導(dǎo)致n等于3時第一組中是ReedSun4變色的情況。
- div一共只有三個h1子元素丈屹，所以當(dāng)n等于4或5的時候调俘，第一組元素均不會出現(xiàn)背景變色的情況了。
- div中1 2 4子元素是h1元素旺垒，而3 5不是彩库，所以第二組中，n等于3或5時沒有元素背景變色先蒋，n等于1 2 4時骇钦，相應(yīng)的元素背景變色。
總結(jié)
本來以為這兩個偽類選擇器要用非常復(fù)雜的語言才能解釋清楚【貉現(xiàn)在看來眯搭，只要抓住關(guān)鍵字，也能輕松應(yīng)對业岁。
總之鳞仙，這兩個偽類選擇器的區(qū)別就是type和child的不同，只要把握住這一點(diǎn)笔时，就肯定能記住他們兩個的區(qū)別了棍好。
共勉~
