从一道问题说起
很多人一看伪类选择器，就在想这不是基础中的基础吗？可是伪类选择器里的:xxx-of-type细节你真的知道吗？为了验证你是否真的知道，请看下面代码
<style>
.item:last-of-type {
color: red;
}
</style>
<div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
请问谁文字颜色红了？？
请问谁文字颜色红了？？
请问谁文字颜色红了？？
如果把上面的选择器从.item:last-of-type变成.item:last-child又是谁变红了？？ 如果把上面的选择器从.item:last-of-type变成.item:last-child又是谁变红了？？ 如果把上面的选择器从.item:last-of-type变成.item:last-child又是谁变红了？？
如果你的回答是没有一个div文字变红，好的，大佬您请绕道。这篇文章您肯定不是受众！如果你的答案不是任何div都没有文字变红，那么恭喜你！！喜提继续阅读本文奖！
好，那接下来，带着疑问我们来聊一聊为什么会这样
复习:xxx-of-type与:xxx-child
-
:xxx-of-type
-
找到同一个父级区域里，同类型的第几个元素
-
例：
- first-of-type： 找同类型里的第一个
- nth-of-type(2)：找同类型里的第二个
- last-of-type：找同类型里的最后一个
-
-
:xxx-child
-
找到同一个父级区域里，第几个子元素
-
例：
- first-child： 找第一个子元素
- nth-child(2)：找第二个子元素
- last-child：找最后一个子元素
-
-
他们之间最大的区别是：xxx-of-type是在同一种类型里的第几个,xxx-child是一定要在父元素中处于第几个子元素
-
例如
<style> .item:last-of-type { color: red; } </style> <div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <p>5</p> </div>- 这里4的文字会变红，因为4属于这一类的最后一个
<style> .item:last-child { color: red; } </style> <div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <p>5</p> </div>- 这里没有文字变红的元素，虽然
.item能找到1,2,3,4，但因为:last-child要找到在父元素里是最后一个子元素的，而最后一个子元素是p不是.item
-
没错，这个知识点是大家绝对都清楚不过的知识，也是基础中的基础。那么接下来，就来讲一点可能你没注意到的细节了！
伪类选择器与交集选择器
首先想问大家一个问题：伪类选择器可以单独使用吗？
答案绝对是：可以！！
你要知道好歹别人也叫选择器，既然是选择器，那跟你认识的标签选择器、类选择器、id选择器等等都是可以单独拎出来使用的！
就好像你写如下样式
:hover {
color: red;
}
那么此时网页所有内容只要被你鼠标移入悬停，都会文字变红色
但是，这么做会导致样式加的太广泛不明确，所以为了更加明确，才引入了交集选择器
交集选择器又是什么呢？就是连着写两种选择器，例如 div.box，就是标签选择器和类选择器一起，交集选择器可以理解为是一种并列条件，所以 div.box代表找到所有标签为div且类为box的元素。
因此:hover这个伪类选择器，前面一般还会加个选择器。如：a.hover或者.box:hover等
来吧！正式解释我们之前的问题
知道以上内容后，我们即可明白，其实也可以单独写:nth-of-type，那么他会匹配所有同级父区域里同类型里的最后一个，为了更加精确我们加个类选择器，也即写成了.item:nth-of-type，那么它代表既要满足有类item，又要满足是同一区域同一种类型的最后一个，所以继续看如下代码
<style>
.item:last-of-type {
color: red;
}
</style>
<div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
3这个div不变红是因为它仅仅满足有类item，而不满足是同类型最后一个。6这个div虽然满足同类型最后一个，但不满足有类item，这就是没有任何元素文字变红的原因
那么，为了加强大家的理解，我们再来继续说明，如果对上述代码稍做修改把456这三个div变成p，如下代码所示
<style>
.item:last-of-type {
color: red;
}
</style>
<div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
此时，3这个div能成功变红。因为此时3这个div满足了有类item，也满足了它是同类型的最后一个
最后再来一个试试
<style>
.item:last-of-type {
color: red;
}
</style>
<div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<p class="item">4</p>
<p class="item">5</p>
<p class="item">6</p>
</div>
你觉得此时是谁文字变红呢？
你觉得此时是谁文字变红呢？
你觉得此时是谁文字变红呢？
如果你的回答是3和6都变红，那么恭喜你，成功掌握！！！
没错，答案就是3和6都变红
原因：
在这个外层div的区域里，有两种类型，一种是div，一种是p。其中3和6都满足是同类型里的最后一个，并且也都满足有类item因此他们都能命中选择器
结语
为什么本文开头的代码，有很多人一眼判断错结果呢？大概率是因为之前对:xxx-of-type有误区，比如.item:last-of-type，以为就是找.item这一类里的最后一个，其实不然。通过本文应该能了解到:last-of-type是找它同类型的元素（同标签）里的最后一个，加一个.item仅仅只是做更精确的匹配。
因此本篇算是从一个小问题加强了各位对伪类选择器交集选择器的细节使用。开发中有用吗？说实话还真没用。但是用来娱乐好玩不？还确实挺好玩的。就像 {} == {}和[] == ![]这种JS问题，开发中并没啥用，但是研究起来着实有趣。PS： {} == {}和[] == ![]这种结果应该都知道吧？且知道原因吧？
