提高 * 选择器的特异性答案

【问题标题】：Raise specificity of * selector提高 * 选择器的特异性
【发布时间】：2022-06-28 00:53:47
【问题描述】：

我正在创建一个 chrome 扩展程序，使网页具有某种字体。我有一个内容脚本，将其作为样式元素附加到文档的头部，但在某些网站上，字体仍然保持不变。我如何能够提高它的特殊性，以便它能够覆盖任何其他 css 规则？

*
{
  font-family: Arial !important; 
}

【问题讨论】：

标签： css

【解决方案1】：

问题是，有些网站将其字体设置为!important，因此您无法覆盖它。

显然，您无法通过向选择器添加更大的“路径”（如在更多类、标签或 ID 中）来增加特异性，因为您不知道它们。

所以我认为强制使用字体的唯一方法是使用 javascript 将样式应用为内联样式。

style="font-family: Arial !important"

这应该总是覆盖其他样式。

【讨论】：

我想知道 css 中是否有我不知道但可能没有的技巧或功能。我遇到的一个我认为可以工作的技巧是重复选择器，但在我的测试中它不适用于 * 选择器。 tobymackenzie.com/blog/2016/05/10/…
我再次查看了您的示例，我注意到它还将样式应用于 ID，它比其他元素具有更高的特异性。我不认为你可以不使用任何 JS 来解决这个问题。但是对于 JS，我假设您可以准备一个样式 ID 并将其应用于包装元素。如果元素已经有一个 ID，这显然会失败。恐怕我认为没有一个优雅的解决方案可以解决这个问题。另请注意，由于“图标字体”被覆盖，某些图标将无法工作。

【解决方案2】：

问题是这样的：

计算权重时不计算通用选择器 (*) 和伪类 :where() 及其参数，但它们确实匹配元素。通用选择器和伪类的值都是 0-0-0；这些选择器不会影响特异性权重值。

因此，您需要通过在 css 规则中定位更具体的内容来提高特异性。

您可以添加一些技巧来增加特异性值，例如，复制下一个示例中的选择器值：

#myId#myId#myId span { /* 3-0-1 */}
.myClass.myClass.myClass span { /* 0-3-1 */ }

所以，你有它，你需要更具体地应用你的 css 规则，以使它们覆盖其他竞争规则。有关更多详细信息，我建议您阅读 MDN 网络文档中的特异性部分。

【讨论】：