css - 字体粗细 : bold ! 重要被覆盖

Question

我遇到了需要覆盖 font-weight 属性的情况。然而，即使我使用 !important 来增加它的优先级，它仍然会被其他样式覆盖。正如您在下面的示例中看到的，我希望 hello world 加粗，但它使用的是 font-weight: normal 。有任何想法吗？谢谢

body {
  font-weight: bold !important;
}

div {
  font-weight: normal;
}

<div>Hello World</div>

Answer 1

如果你想让你的字体粗细应用于 div 和其他标签，你可以考虑使用通用选择器。 (因为我怀疑你想让所有页面都加粗)

在您的情况下，您将样式应用于 body 而不是 div 元素，即使使用 ，子元素的样式也始终覆盖父样式!重要。所以这个规则只适用于从 body 继承 font-weight 的元素。

body *{
  font-weight: bold !important;
}

div {
  font-weight: normal;
}

<div>Hello World</div>