Запрет наследования CSS дочерним элементам выбранного элемента

Question

У меня есть меню, состоящее из вложенных UL и LI, например:

.wrapper > ul:first-child > li:last-child {
  color: red;
}

<div class="wrapper">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolar</li>
    <li>Style me!
      <ul>
        <li>Lorem</li>
        <li>Don't style me!</li>
      </ul>
    </li>
  </ul>
</div>

Я хочу добавить стиль к последнему <li> из первых <ul>, но не иметь детей (вложенные <ul> унаследовать это.

Я пытался:

.wrapper > ul:first-child > li:last-child {/*styles*/}

но это все еще стилизация последнего элемента.

Кто-нибудь знает, как я могу нацелить только этот 1 элемент (только с CSS)?

Answer 1

Некоторые свойства CSS наследуются, и вы не можете предотвратить это.

Наследование распространяет значения свойств от родительских элементов к их дочерним элементам.

Некоторые свойства являются унаследованными свойствами, как определено в их таблице определения свойств. Это означает, что, если каскад не приводит к значению, значение будет определяться наследованием.

Однако вы можете изменить это, выбрав дочерние элементы и восстановив желаемое значение.

.wrapper > ul:first-child > li:last-child {
  color: red;
}
.wrapper > ul:first-child > li:last-child > * {
  color: initial;
}

<div class="wrapper">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolar</li>
    <li>Style me!
      <ul>
        <li>Lorem</li>
        <li>Don't style me!</li>
      </ul>
    </li>
  </ul>
</div>