防止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>