Почему CSS-селектор с символом> sign (direct child) переопределяет стили по умолчанию?

Может ли кто-нибудь объяснить мне, почему знак CSS > (прямой дочерний элемент) переопределяет цвет по умолчанию для всех тегов <li> в этом примере:

ul > li {
  color:red;
}

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul>

Ответы

Ответ 1

Проблема не является дочерним комбинатором (>), это свойство color, которое наследуется.

Хотя исходное значение свойства color варьируется от браузера к браузеру, обычно используется inherit. Это означает, что цвет текста элемента наследуется от родителя. Вы видите это в своем коде.

Напротив, свойство border не наследуется. Обратите внимание, что, в отличие от цвета текста, оно применяется только к целевому li:

ul > li {
  color: red;
  border: 1px solid black;
}

li { border: 1px solid inherit !important; }

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul>

Ответ 2

Значение по умолчанию для свойства color для большинства элементов inherit, а не black. Это означает, что он принимает любое значение, которое имеет элемент parent (ol). (И что после ol наследуется от красного li).

Вам нужно будет установить явный цвет, чтобы переопределить его. Например:

ul > li li {
   color: black;
}

или

ol > li {
   color: black;
}

Ответ 3

ol наследует стили. Вам нужно будет указать стили для внутреннего списка.