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.