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

左手的ㄟ右手 2024-04-19 07:07 30阅读 0赞

## 今天运用到了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都变为红色。

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