彻底搞懂css3中的八个结构伪类选择器

来，让我们先认识一下这八大金刚：

:first-child :last-child :nth-child :nth-last-child
:first-of-type :last-of-type :nth-of-type :nth-last-of-type

看了上面这些伪类选择器，不知道小伙伴心中是否有跟我一样的想法：这些双胞胎兄弟到底是啥？感觉区别不大啊！

其实这些就是css3给我们新增的伪类选择器属性，顾名思义就是来让我们选择元素并给元素设置样式用的。

但是，这几兄弟长得太相似，在项目中用的时候，我们总是小心翼翼的选择，但结果总是和我们的预期相差甚远。

 上代码：

<main>
   <div>I am `div` #1.</div>
   <p><span>I am the only `p` among my siblings.</span></p>
   <div>I am `div` #2.</div>
   <div>
     <i>I am the only `i` child.</i><br>
     <em>I am `em` #1.</em><br>
     <em>I am `em` #2.</em>
   </div>
</main>

问：让第一个p标签中的字体变成红色，用伪类选择器应该怎么写？

答：这还不简单：

main p:first-child {color: red;}

结果瞬间打脸，样式并没有生效。

怎么办？解决问题的根本办法就是从根源上铲除它，是时候整明白这几个哥们了。

:first-child 

从字面理解，选择父元素中的第一个子元素。

我们设置第一种样式：

main :first-child {color: red;}

这句话的意思就是将main元素及main元素的后代元素，只要存在父子关系，父元素中的第一个子元素就要应用上相应的样式。这里与元素类型无关，只要你是父元素中的第一个子元素，那么你的字体就得变成红色。

main元素及其后代元素中到底存在几对父子关系呢？

首先main元素下面存在四个子元素，那么第一个子元素肯定要应用样式；接着main下面的四个子元素当中第二个和第四个元素也有自己的子元素，这个时候这两个元素中的第一个子元素也要应用样式，至此，就没有更深层次的父子关系了，那么最终的结果，我们看一下。

我们设置第二种样式：

main p:first-child {color: red;}

这段代码就是我们开篇引入的例子，我们分析一下，我们的本意是想通过这行代码，找到第一个p标签，并且将其字体颜色设置为红色，但是我们发现，这段代码并没有生效，即元素没有被选中。

这里我们要知道，:first-child这个伪类选择器如果前面加了限定元素，比如说这里的p元素，这个时候它的意思是要找到main元素下排序在第一位的子元素p，这里强调的是位置，即p元素必须要在其它子元素之前，如果p不在第一位，那么元素将不会被选中，样式也不会生效。

我们看一下，现在的p元素明显是在div元素之后，属于第二个子元素，所以无法被选中，样式当然不会应用到元素上。要想选中p元素应该如何写呢？那就要用到:nth-child()了。

:nth-child(n)

选中父元素当中的第n个子元素。

这里我们要注意，如果我们在这个选择器前面加了限定标签，比如div标签，那么n一定要跟这个div元素的位置是一致的，比如，我们的n等于5，那么如果父元素下的第五个子元素不是div，那么这个时候选择器将无法找到目标元素。

了解了这些，开篇的那个问题就比较简单了。如果我们想要选中p元素，我们就要知道当前p元素在父元素中位置，当前p元素排在第二位，这个时候我们应该这样写：

main p:nth-child(2) {
  color: red;
}

巩固一下：如果我要选中main元素下第二个div元素并将字体设置成红色，应该如何写呢？大家可以试试。 

:last-child :nth-last-child

这两个伪类选择器其实和上面的两个选择器作用一样，唯一的区别是在选择元素的时候，顺序是从后往前查找。

:first-of-type

直译的话就是选择同类型的一组兄弟元素中的第一个元素，侧重点在于标签的类型，也就是说在子元素中，多个相同类型的标签只会将样式应用到第一个元素上。

我们设置第一种样式：

main :first-of-type { color: red; }

我们分析一下这个选择器所执行的内容，首先会在main标签下查找第一级元素，第一级元素里面会有两类标签，div和p，这个时候这两类标签中的第一个元素分别会被应用上设置的样式。接着往下继续查找，p标签下还有子元素span并且只有这一类元素，所以这个span元素会被应用上css样式；然后往下找到了最后一个div元素，div元素也存在子元素，并且五个子元素中有三种类型，i、em和br类型标签，此时第一个i元素和第一个em元素会被应用上css样式；此时整个过程结束，最终效果如图。

我们设置第二种样式：

main div:first-of-type { color: red; }

这段代码的意思是找到main元素下元素类型是div的后代元素，将div同类型的一组兄弟元素中的第一个元素应用上样式。此时main元素下有三个div子元素，并且它们属于兄弟元素，所以，第一个div将被应用上样式；接着往下搜寻，后代元素中不存在div元素，过程结束。

:nth-of-type(n) 

选择同类型的一组兄弟元素中的第n个元素。

main :nth-of-type(2) {color: red;}

找到main元素下面同类型元素中的第二个元素并将字体颜色改为红色。

大致的过程可以这样理解：首先查找main元素下的第一级子元素，其中存在div和p两种类型，p元素只有一个，不满足条件，此时只有div这一类型中的第二个兄弟元素被选中。然后接着往下查找后代元素，发现最后一个div元素中还存在子元素，并且五个子元素中有三种类型，i、em和br类型标签，此时只有em元素满足条件，将第二个em元素应用css样式，至此整个过程结束。

:last-of-type :nth-last-of-type 

这两个伪类选择器和:first-of-type、:nth-of-type(n)两个选择器作用一样，唯一的区别是在选择元素的时候，顺序是从后往前查找。

最后总结一下，其实:first-child :last-child :nth-child :nth-last-child这四个选择器偏重于元素的位置，而:first-of-type :last-of-type :nth-of-type :nth-last-of-type则更偏重于元素类型。

通过以上内容及案例的讲解，希望能够帮助小伙伴们对这八个伪类选择器的含义及作用有更深入的理解，最后如果文章内容确实对您有益，还请点个赞鼓励一下，如果发现文章中存在错误，也请评论指出，我会及时修正。