:first-child с вложенными элементами
Я хотел бы понять, почему li:first-child нацелен на первый li (CHILD 1) и его дочерние элементы (GRANDCHILD 1.1, GRANDCHILD 1.2, GRANDCHILD 1.3), а остальные дети li (CHILD 2 и CHILD 3) нацелены только на его первый ребенок (ВНУК 2.1 и ВНУК 3.1)
HTML
<body>
<ul>
PARENT
<li>CHILD 1
<ul>
<li>GRANDCHILD 1.1</li>
<li>GRANDCHILD 1.2</li>
<li>GRANDCHILD 1.3</li>
</ul>
</li>
<li>CHILD 2
<ul>
<li>GRANDCHILD 2.1</li>
<li>GRANDCHILD 2.2</li>
<li>GRANDCHILD 2.3</li>
</ul>
</li>
<li>CHILD 3
<ul>
<li>GRANDCHILD 3.1</li>
<li>GRANDCHILD 3.2</li>
<li>GRANDCHILD 3.3</li>
</ul>
</li>
</ul>
</body>
CSS
li:first-child {
background: chartreuse;
}
Ответы 1
Если вы добавите border: 1px solid red;, он покажет вам ответ.
li:first-child {
background: chartreuse;
border: 1px solid red;
}
Проверьте это здесь: https://codepen.io/riiiad/pen/dyppZdY
В этом контексте правильно ли утверждать, что ВНУКИ 1.1, 1.2, 1.3 унаследовали свой стиль от ДИТЯ 1?
Не совсем. CHILD 1 выбирается с помощью вашего селектора, и, поскольку он является контейнером ul и li внутри него, другие элементы просто выглядят так, как будто они имеют тот же цвет bg. Но у них нет такого же css.
Я обновил ответ ссылкой. @ЖанКарлос
Теперь я понял. Спасибо!
@JeanCarlos Не могли бы пометить ответ как полезный. Рад, что смог помочь.
Первый <li> является первым дочерним элементом. Таким образом, он полностью окружен bg-цветом и, конечно же, всеми его дочерними элементами. Которые все 1.x.