防止 CSS 继承到选定元素的子元素答案

【问题标题】：Prevent CSS inheritance to children of the selected element防止 CSS 继承到选定元素的子元素
【发布时间】：2017-05-23 07:00:04
【问题描述】：

我有一个由嵌套的 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>

我想为第一个<ul> 的最后一个<li> 添加一个样式，但不让它的子级（嵌套的<ul>）继承它。

我试过了：

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

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

有谁知道我如何只定位那 1 个元素（仅使用 CSS）？

【问题讨论】：

标签： css css-cascade

【解决方案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>

【讨论】：