时间戳

首页 > 解决方案 > 如何丢弃特定标签内的全局选择器规则？

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

问题描述

我有全局 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;
}

标签： cssemotion

解决方案

您不能让全局选择器不针对单个元素 - 您必须使用辅助规则覆盖全局规则，该辅助规则应用您只想应用于特定元素的行为。请注意，此次要规则应具有更高的特异性。

最简单的方法是使用选择器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>

推荐阅读