！重要的是被没有内联样式的元素覆盖

Question

我今天在工作中遇到了一个最有趣的困境，我甚至无法理解为什么会发生这种困境。好奇只是在扼杀我。

我们有一个客户端坚持使用特定字体而不管内联样式。我不想讨论！重要及其应该使用的方式。

但我对这种情况非常好奇

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;
}

有人可以告诉我这是怎么回事吗？当然！重要的是应该覆盖.ui-widget。我甚至增加了对

的特异性

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

没有运气！如果有人可以阐明为什么会发生这种情况会非常有趣吗？

Answer 1

您将其应用于容器。如果您希望这样做，则需要将每个项目的font-family更改为inherit，否则将因特殊情况而被覆盖，因为您的!important仅会被应用到CSS选择器中的元素。

!important如果设置了子规则，则不会覆盖子规则，只会将规则应用于选择器。

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

body {
   padding: 30px!important;
}

我们是否会期望作为身体孩子的每个元素都应用padding: 30px!important规则？它完全是混乱。

这可能是进一步阅读参考的良好链接： W3C Wiki – Inheritance and Cascade