nth-child

[BUappend]

<style> .box1{ height: 500px; width: 500px; background-color: antiquewhite; display: flex; } .box1-1{ height: 100%; flex:3; } .box1-2{ height: 100%; flex:3; } .box1-3{ height: 100%; flex:4; } .box1 :nth-child(1){ background-color: blueviolet; } .box1 :nth-child(2){ width: 50px; height: 50px; } </style>

<div class="box1">
    <div class="box1-1">
        <div></div>
        <div class="box4" style="background-color: brown;"></div>
    </div>
    <div class="box1-2"></div>
    <div class="box1-3"></div>
</div>


这样写，为什么 box4 会变成 width:50px  height:50px????

[Perry]

.box1:nth-child(2) 和 .box1 :nth-child(2) 意义不同，后者是 .box1 的每个 child X 的 X:nth-child(2)

[FragmentLs]

~~~~
div p {
color: red;
}
~~~~

~~~~
<div>
<p>One</p>

<ul>
<li>
<p>Two</p>
<p>Two</p>
</li>
</ul>

<div>
<p>Three</p>
</div>

</div>
~~~~

同理

[Sivan]

`.box1 :nth-child(2)` => `.box1 > div:nth-child(2)`

[BUappend]

@Perry 谢谢 是不是 nth-child 只是用来选择有相同的 class 的元素比较好用啊？直接就 .clsss:nth-child(X) 了，但是如果选择某个父元素下第几个子元素是不是就不太行了呢

[BUappend]

@Perry 对 可以这样 .class>div:nth-child(X) 选择某个 class 下的第 X 个 div

[BUappend]

@Sivan 谢谢

[BUappend]

@Sivan 应该是 box1 :nth-child(2) => box1 div:nth-child(2)

[BUappend]

@FragmentLs 谢谢