Description
:first-child / :last-child
CSS3手册中描述：
- :first-child：选择属于其父元素的首个子元素的每个子元素
- :last-child：选择属于其父元素的最后一个子元素的每个子元素
这个描述不免让人看起有些云里雾里，所以我们直接来看个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p:first-child {
border: 1px solid red;
}
p:last-child {
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
<div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
</body>
</html>
结果：
由此可见，:first-child和:last-child选择器会将页面中所有元素里，符合父元素下首个或末尾个指定类型的子元素选出来。 这么看来，这个选择器似乎不难理解，那么这个选择器可以解决我们的需求吗？让我看看下面这个场景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.p:first-child {
border: 1px solid red;
}
.p:last-child {
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<p class="p">这是第一个段落。</p>
<p class="p">这是第二个段落。</p>
<p class="p">这是第三个段落。</p>
</div>
<div>
<p>这是一个干扰段落。</p>
<p class="p">这是第一个段落。</p>
<p class="p">这是第二个段落。</p>
<p class="p">这是第三个段落。</p>
<p>这是一个干扰段落。</p>
</div>
</body>
</html>
结果：
在这个例子里，我们发现第二个部分并没有实现我们想要的效果，这是为什么呢？
原来:first-child和:last-child选择器并没有我们想的那么智能，他所能做的，只是找到父元素下的第一个或最后一个元素，而当我们想通过这个选择器找到具体某一类的首个和最后一个元素时，当且仅当元素 同时满足这两个条件（既是第一个或最后一个元素，又具有该属性的类名） 才会被选中。
所以总结一下：想要通过这组选择器选择某一类型首个或最后一个元素需要满足
- 该元素属于这个类名
- 该元素是其父元素下的首个或最后一个子元素
:first-of-type / :last-of-type
有了对上面两个选择器的进一步认知后，再来看看这一对。
CSS3手册中描述：
- :first-of-type：选择属于其父元素的首个指定类型子元素的每个子元素
- :last-of-type：选择属于其父元素的最后一个指定类型子元素的每个子元素
来看个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p:first-of-type {
border: 1px solid red;
}
p:last-of-type {
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
<div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</div>
</body>
</html>
结果：
乍看之下，这对选择器似乎与上一对差不多，那我们来看看下面这个场景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.p:first-of-type {
border: 1px solid red;
}
.p:last-of-type {
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<div>这是一个干扰段落。</div>
<p class="p">这是第一个段落。</p>
<p class="p">这是第二个段落。</p>
<p class="p">这是第三个段落。</p>
<div>这是一个干扰段落。</div>
</div>
<div>
<p>这是一个干扰段落。</p>
<p class="p">这是第一个段落。</p>
<p class="p">这是第二个段落。</p>
<p class="p">这是第三个段落。</p>
<p>这是一个干扰段落。</p>
</div>
</body>
</html>
结果：
在第一部分里，我们发现，当父元素含有其他标签类型的元素时，我们还是成功的选中了指定类型的元素，可当父元素里其他兄弟组件标签类型和我们指定的元素相同时，我们依旧没有办法选中首个和最后一个元素，这又是为什么呢？
这就要说到:first-of-type和:last-of-type的工作原理
- 当且仅当元素符合选择器中
指定类型，且是父元素下同类标签中首个或最后一个子元素时，方可被选中
所以上面的筛选条件是，<p>标签即要是父元素所有<p>标签中的第一个或者最后一个标签，同时又要有指定的类名，这两个条件必须同时满足
:nth-child(n) / :nth-last-child(n)
CSS3手册中描述：
- :nth-child(n)：选择属于其父元素的第n个子元素，不论元素的类型
- :nth-last-child(n)：选择属于其父元素的倒数第n个子元素，不论元素的类型
倘若我们知道在想要的类前后有多少个相同标签的元素，我们可以采用一种委曲求全的方法，来看下面这个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.p:nth-child(2) {
border: 1px solid red;
}
.p:nth-last-child(2) {
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<p>这是一个干扰段落。</p>
<p class="p">这是第一个段落。</p>
<p class="p">这是第二个段落。</p>
<p class="p">这是第三个段落。</p>
<p>这是一个干扰段落。</p>
</div>
</body>
</html>
结果：
总结
最后我们来总结一下，在解决这个需求的时候，其实我们遇到了几种不同的场景，针对不同的场景，我们需要使用不同的选择器。
- 当父元素下只有指定的类型：使用
:first-child / :last-child - 当父元素下除了指定类型外，还有其他标签元素：使用
:first-of-type / :last-of-type - 当父元素下除了指定类型（某一类名）外，还有其他同类标签元素，且已知其他标签个数：使用
:nth-child(n) / :nth-last-child(n)或:nth-of-type(n) / :nth-last-of-type(n)