防止 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 属性是继承的，您无法阻止这种情况。

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

某些属性是继承的属性，如其定义 属性定义表。这意味着，除非级联结果 在值中，该值将由继承确定。

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

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