css - 是否可以在 CSS 中创建一个防止全局样式的 Guard 类名？全局样式可以修改

Question

请参阅此最小示例。

假设我reset.css在全局范围内有自己的版本。

/* My Reset CSS */
button {
  color: red;
}

我的所有标记都会受到我的 Reset.css 的影响。

现在，我想防止某些标记受到我的 Reset.css 的影响

<button>I'm a button with Reset CSS</button>

<div class="guard">
  <button>I don't want to be affected.</button>
</div>

我知道我可以用它!important来再次覆盖 Reset.css。

但是我想创建一个guard类，类中的所有内容guard都不会从 Reset.css 继承任何内容

我试过:not()选择器，但它不起作用。

/* Not working */
:not(.guard) button {
  color: red;
}

如何修改我自己的 Reset.css 版本来实现这一点？

/* My Reset CSS */
button {
  color: red;
}

<button>I'm a button with Reset CSS</button>

<div class="guard">
  <button>I don't want to be affected.</button>
</div>

标签： css