!important被没有内联样式的元素覆盖

Question

!important被没有内联样式的元素覆盖

htmlcss

4

今天在工作中我遇到了一个非常有趣的难题，甚至无法想象为什么会出现这种情况。好奇心简直要把我逼疯了。

我们有一个客户坚持使用特定字体，而不顾及内联样式。我不想就 !important 的使用方式展开争论。

但是我对这个情况非常好奇。

http://partner-dashboard.qed42.webfactional.com/partner/108/insights/homepage：请查看手风琴中的摘要。注意字体系列。

.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1.1em;
}

.insights-widget-container {
  font-family: "Trebuchet MS",Helvetica,sans-serif !important; //I am being overriden
  line-height: 1.5;
  font-size: 13px;
}

请问这是如何发生的？!important 应该会覆盖 .ui-widget，我甚至提高了特异性。

#insights-widget-container {
  font-family: "Trebuchet MS",Helvetica,sans-serif !important; //I am being overriden
}

运气不好！如果有人能够解释一下这是为什么，那将非常有趣？

- Pratik Bothra

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Burgess · Accepted Answer

你正在将其应用于容器。如果你想让它起作用，你需要在每个单独的项上更改font-family为inherit，否则它将被特异性覆盖，因为你的!important仅适用于CSS选择器中的元素。 !important不会覆盖已设置的子规则，只会覆盖适用于选择器的规则。

想象一下，如果CSS按照你的预期工作，它会是什么样子。如果我设置这样的规则：

body {
   padding: 30px!important;
}

那么我们是否期望每个作为 body 子元素的元素都应用 padding: 30px!important 规则呢？这将会是彻头彻尾的混乱。

这可能是一个好的链接，供进一步阅读：W3C Wiki – 继承和级联