如何在某些标签内丢弃全局选择器规则？

Question

我有全局CSS规则：

li *:last-child {
  margin-bottom: 0;
}

在<nav>标记内，我需要使此角色不起作用。例如，我有以下代码：

<nav>
  <ul>
    <li>
      <span class='foo'>Foo</span>
    </li>
  </ul>
</nav>

.foo {
  margin: 1rem;
}

我希望类foo的角色正常工作。我尝试过：

nav li *:last-child {
  margin-bottom: unset;
}

它不起作用。对于我的情况，不能与其他选择器一起声明类foo的规则：

.foo, nav li .foo:last-child {
  margin: 1rem;
}

这是因为我在js框架情感中定义规则。

我知道我可以在!important规则中添加.foo，但这不是一个好习惯。我该怎么做才能解决我的问题？

UPD。我发现在情感上我可以使用&占位符作为类的名称。我可以定义margin的属性：

 &, nav li &:last-child {
  margin: 1rem;
}

Answer 1

您不能将全局选择器 not 定位到单个元素-您必须使用辅助规则覆盖全局规则，该辅助规则将您想要仅应用于特定行为的行为元件。请注意，该次要规则应具有较高的specificity。

最简单的方法是使用选择器li .foo，它比li *:last-child选择器更具特异性，因此会覆盖它：

这可以在下面看到：

li *:last-child {
  margin-bottom: 0;
}

li .foo {
  margin: 1rem;
}

<nav>
  <ul>
    <li>
      <span class='foo'>Foo</span>
    </li>
  </ul>
</nav>