防止CSS继承所选元素的儿童

Question

我有包括嵌套的UL和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*/} 

但仍样式的最后一个元素。

有人会知道我该如何定位这1个元素（只有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>