CSS第一胎错误？或预期的行为？

问题描述

| 我有以下设置

.test div:first-child {};

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

    <div id=\"two\"> 

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

    </div>

</div>

尽管div＃three不是div.test的第一个子样式，但它仍然以某种方式继承了第一个子样式。浏览器是否故意这样做？有人可以解释吗？     

解决方法

        

#two

是

#one

的第一个孩子，而

#three

不是，,3ѭ仍然是

#two

的第一个孩子。因此，两个内在的6都获得样式。 选择器中的后代组合器（空格字符）告诉浏览器从

.test

的任何嵌套级别中选择任何

div

，只要它包含在该类的元素内的某个位置即可。

:first-child

伪类说，仅当元素是其父元素的第一个子元素时才选择元素，而不论该父元素是什么，而不仅限于组合器左侧表示的元素。 如果只想定位

.test

的第一个孩子，请使用子组合器

>

：

.test > div:first-child {}

因为“ 11”表示父母与子女的关系，所以可以肯定地暗示与“ 14”相关的父母由“ 8”表示。     ,        这是预期的行为。您需要这样编写CSS规则：

.test > div:first-child

>

确保仅选择

.test

元素的第一个子元素。没有它，任何在

.test

内任何节点的第一个孩子的child6ѭ都会被选择。