问答详情
源自：6-8 CSS3 结构性伪类选择器—nth-child(n)

请教下面这个怎么解释？

<div class="first">

    <div class="second">

        <h1 class="third">

            <p>1</p>

        </h1>

        <p>2</p>

    </div>

    <p>3</p>

    <p>4</p>

    <p>5</p>

</div>


CSS样式为p:nth-child(2n+1){color:red;}

结果1和4变红，其他不变，怎么解释？

提问者：sherryliu 2017-02-08 22:12

个回答

  • sherryliu
    2017-02-08 22:31:10

    刚想到一个解释，<div class="first”>作父元素，子元素有“second” p3 p4 p5(希望你们看得懂)，符合2n+1的位置的是“second”和p4，由于选的是p元素，所以这一选择中p4变红，second不变；

    <div class="second">作父元素，子元素有h1和p2，p2不在2n+1的位置上，故两个都不变；

    <h1 class="third">做父元素，子元素有p1，在2n+1的位置上，变红。

    是这样吗？我都怀疑我是不是真的理解父元素的意思了。


    还找到了p:nth-child(2n+1){color:red；}和p:nth-of type(2n+1){color:red;}的区别，前者先找2n+1的位置再找p，后者先找p在找2n+1的位置；


    0