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

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

我试过了：

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

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

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

Answer 1

某些 CSS 属性是继承的，您无法阻止。

继承将属性值从父元素传播到其子元素。

某些属性是继承属性，如其属性定义表中所定义。这意味着，除非级联产生一个值，否则该值将由继承确定。

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

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