Блог

Главная - Вопросы по программированию - : первый потомок с вложенными элементами

: первый потомок с вложенными элементами

#css #css-selectors

#css #css-селекторы

Вопрос:

Я хотел бы понять, почему li:first-child нацелен на первый li (ДОЧЕРНИЙ ЭЛЕМЕНТ 1) и его дочерние элементы (ВНУК 1.1, ВНУК 1.2, ВНУК 1.3), но о других дочерних элементах li (ДОЧЕРНИЙ ЭЛЕМЕНТ 2 и ДОЧЕРНИЙ ЭЛЕМЕНТ 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. Первый <li> является первым дочерним элементом. Таким образом, он завершен, окружен цветом bg и, конечно же, всеми его дочерними элементами. Которые все 1.x.

Ответ №1:

Если вы добавите border: 1px solid red; , он покажет вам ответ.

 li:first-child {
  background: chartreuse;
  border: 1px solid red;
}

Проверьте это здесь: https://codepen.io/riiiad/pen/dyppZdY

Комментарии:

1. В этом контексте правильно ли утверждать, что ВНУК 1.1, 1.2, 1.3 унаследовал свой стиль от ДОЧЕРНЕГО ЭЛЕМЕНТА 1?

2. Не совсем. ДОЧЕРНИЙ элемент 1 выбирается с помощью вашего селектора, и поскольку он является контейнером ul и li внутри него, остальные элементы выглядят так, как будто они имеют тот же цвет bg. Но у них нет одинакового css.

3. Я обновил ответ ссылкой. @JeanCarlos

4. Теперь я понял. Спасибо!

5. @JeanCarlos не возражал бы отметить ответ как полезный. Рад, что смог помочь.