CSS第一个孩子的bug？或预期的行为？

Question

我有以下设置

.test div:first-child {};

<div class="test" id="one"> 

    <div id="two"> 

        <div id="three"> 
        </div>

    </div>

</div>

不知何故div＃3继承了第一个孩子的样式，即使它不是div.test的第一个孩子。这是故意的浏览器吗？有人可以解释一下吗？

Answer 1

虽然#two是#one的第一个孩子，但#three不是，#three仍然是#two的第一个孩子。所以内部div都得到了样式。

选择器中的后代组合子（空格字符）告诉浏览器在div的任何嵌套级别中选择任何.test，只要它包含在具有该类的元素内的某个位置即可。 :first-child伪类只是选择一个元素，如果它是它的父元素的第一个子元素，无论父元素是什么，而不仅仅是组合元素左侧表示的元素。

如果您只想定位.test的第一个孩子，请使用子组合子>：

.test > div:first-child {}

由于>表达了父子关系，因此可以安全地暗示div:first-child关注的父母由.test代表。

Answer 2

这是预期的行为。您需要像这样编写CSS规则：

.test > div:first-child

>确保只选择.test元素的第一个子元素。没有它，任何div都是.test中任何节点的第一个孩子。