Предотвратить CSS наследование детям выбранного элемента

Question

у меня есть меню, состоящее из вложенных ULS и LIS, например:

.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*/} 

, но это до сих пор стили последнего элемента.

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

Answer 1

Некоторые свойства CSS: inherited, и вы не можете этого предотвратить.

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

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

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

.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>