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

Question

我有全局 css 规则:

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

内部<nav>标签我需要使这个 Angular 色不起作用。例如我有代码:

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

.foo {
  margin: 1rem;
}

我想要类(class)的 Angular 色 foo上类。我试过:

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

它不起作用。为类 foo 声明规则与另一个选择器一起不是我的选择:

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

因为我是在js框架emotion中定义规则

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

更新。我发现在情感上我可以用&类名的占位符。我可以定义 margin 的属性:

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

Answer 1

你不能让全局选择器不以单个元素为目标 - 你必须用次要规则覆盖全局规则，该次要规则应用你想仅应用到特定元素的行为元素。请注意，此次要规则应具有更高的 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>