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

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 - 继承和级联