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