font-weight：bold！important被覆盖

Question

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

body {
  font-weight: bold !important;
}

div {
  font-weight: normal;
}

<div>Hello World</div>

Answer 1

这与样式的绑定优先级有关。解决此问题的方法是使规则更具体，例如相反，定位body div：

＆＃13;

＆＃13;

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

div {
  font-weight: normal;
}

＆＃13;

<div>Hello World</div>

＆＃13;

＆＃13;

＆＃13;

然而，除非绝对不可避免，否则请不要这样做。 !important充其量只是一种黑客攻击。如果您控制HTML，只需引入一个类或使用更相关的选择器。

Answer 2

如果要将font-weight应用于div以及其他标记，可以考虑使用通用选择器。 （因为我怀疑你想把所有页面加粗）

在您的情况下，您将样式应用于 body 而不是div元素和子元素的样式始终覆盖父样式，即使使用!important也是如此。因此，此规则仅适用于从正文继承字体权重的元素。

＆＃13;

＆＃13;

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

div {
  font-weight: normal;
}

＆＃13;

<div>Hello World</div>

＆＃13;

＆＃13;

＆＃13;