首先上概念
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
看概念，挺好理解，可是，每次实际使用的时候，就总是莫名其妙选不到想要的元素，于是我测试了各种例子，决定彻底搞清楚这两个概念。
1、:nth-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container p:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<div class='container'>
<p>这是第一个段落。</p>
<h1><p>这是一个标题</p></h1>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</div>
</body>
</html>
效果
用我的理解就是：
.container下面的子元素，第3个，同时，还得是个p元素，就是满足条件的元素，同样适用于样式选择器的情况，看下一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.container .pp:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<div class='container'>
<p>这是第一个段落。</p>
<h1><p>这是一个标题</p></h1>
<p class='pp'>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</div>
</body>
</html>
image.png
同样用那句话，
.container下面的子元素，第3个，同时，还得是个class='pp'的元素，就是满足条件的元素，这边都是不分类型的，只要是.container下面的子元素就行了。
2、:nth-of-type
其实跟:nth-child都一样，就一个地方不一样：排序选择第3个元素的时候，得是同类型的标签，看例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container .pp:nth-child(3)
{
background:#ff0000;
}
.container .pp:nth-of-type(3)
{
color:orange;
}
</style>
</head>
<body>
<div class='container'>
<h1><p>这是一个标题</p></h1>
<p>这是第一个段落。</p>
<p class='pp'>这是第二个段落。</p>
<span>这是第一个span</span>
<span>这是第二个span</span>
<span class='pp'>这是第三个span</span>
<p class='pp'>这是第三个段落。</p>
<p>这是第四个段落。</p>
</div>
</body>
</html>
image.png
我给
:nth-of-type(3)的元素设置了字体颜色，可以看到，第3个class='pp'的p元素和class='pp'的span元素的字体颜色都发生了改变，因为:nth-of-type是根据标签类别排序的，所以存在多个选择的情况
总结啦
虽然.pp:nth-child(3)和.pp:nth-of-type(3)这两种写法，都是先写了选择器，后排序选择，但是我觉得应该是先排序选择，再加上一个选择器的条件，重点：两者是&的关系啦，这样觉得就好理解多了。
回过头来再看概念，哦~~理解了，你呢？
网友评论