CSS中的:first-child、nth-child()与nth-of-type()

今天运用到了first-child与nth-child()，发现怎么也用不对，重新查了下发现自己对这两个伪类的理解有错误，就重新开个帖子。

first-child

先来段代码:

H5:
<div>
	<h2>2</h2>
	<p>XX</p>
	<p>XXX</p>
	<p>XXXX</p>
</div>
CSS:
p:first-child{
	color:red;
}

最开始的时候我是想让div里的p元素颜色变成红色，并且想用first-child来指定改变XX的颜色。即以上代码。但是发现怎么调都没有反应。why？后来查下发现是我的理解错了。最开始我的理解是编译器会以我们选择的p元素为起点，在兄弟元素里寻找第一个p元素。但是在实际的编译顺序中。

1. 是以p元素为起点，先去寻找p元素的父元素，也就是div。
2. 再把父元素div里的元素按顺序排列好，包括h2和p元素。
3. 然后再寻找第一个子元素，也就是< h2 >。
4. 开始匹配< h2 >是不是一个p元素。
5. 这时候由于< h2 >不是一个p元素，所以设定样式表失败。

同理，nth-child()的编译顺序也是如此。

所以当我们把CSS改成以下也是无效的。

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

如果想要改变的话就要用以下代码：

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

因为此时第一个p元素是div里的第二个元素，所以就要用nth-child(2)来设定。

总结下来就是:first-child、:nth-child()是先找指定位置的元素，再看元素符不符合。

那么有符合我思路的选择器吗？

有，可以用nth-of-type();

nth-of-type()就是先寻找父节点里的p元素，然后在找指定的位置。

H5：
<div class="ss">
    <h2>KK</h2>
    <p>XX</p>
    <p>XXX</p>
    <p>XXXX</p>
</div>
<div class="KK">
    <h2>KK</h2>
    <p>XX</p>
    <p>XXX</p>
    <p>XXXX</p>
</div>
CSS：
.KK p:nth-of-type(1){
	color: red;
}
p:nth-of-type(1){
	color: red;
}

以上代码第一个CSS会让第二个XX变为红色，而第二个CSS会让两个XX都变为红色。

具体的就先讲到这，如有错误欢迎指正。