CSS Ошибка первого ребенка?или предполагаемое поведение?

Question

У меня есть следующие настройки

.test div:first-child {};

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

    <div id="two"> 

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

    </div>

</div>

Каким-то образом div # three наследует стили первого потомка, даже если он не первый потомок div.test. Это преднамеренно браузерами? Может кто-нибудь объяснить это?

Answer 1

Хотя #two является первым дочерним элементом #one, а #three - нет, #three по-прежнему является первым дочерним элементом #two. Таким образом, оба внутренних div s получают стили.

Комбинатор-потомок (символ пробела) в вашем селекторе говорит браузеру выбрать любой div на любом уровне вложенности от .test, если он содержится где-то внутри элемента с этим классом. Псевдокласс :first-child говорит, что нужно выбирать элемент только в том случае, если он является первым дочерним элементом его родителя, независимо от того, каким родительским элементом может быть , а не только элементом, представленным в левой части комбинатора.

Если вы хотите нацелиться только на первого ребенка .test, используйте комбинатор дочерних элементов >:

.test > div:first-child {}

Поскольку > выражает отношения родитель-ребенок, можно с уверенностью подразумевать, что соответствующий родитель с div:first-child представлен .test.

Answer 2

Это предполагаемое поведение.Вам нужно написать свое правило CSS следующим образом:

.test > div:first-child

> обеспечивает выбор только первого дочернего элемента .test.Без него выбирается любой div, который является первым потомком любого узла в пределах .test.