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

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

我试过：

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

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

有谁知道我如何才能只定位那 1 个元素（只有 CSS）？

Answer 1

有些 CSS 属性是 inherited，您无法阻止它。

Inheritance propagates property values from parent elements to their children.

Some properties are inherited properties, as defined in their property definition table. This means that, unless the cascade results in a value, the value will be determined by inheritance.

但是，您可以通过选择子项并恢复所需的值来覆盖它。

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

防止 CSS 继承所选元素的子元素

Prevent CSS inheritance to children of the selected element

css

css-cascade