为什么我的 !important 属性在 Google Chrome 中不起作用？答案

【问题标题】：Why isn't my !important attribute working in Google Chrome?为什么我的 !important 属性在 Google Chrome 中不起作用？
【发布时间】：2011-03-15 15:30:45
【问题描述】：

我的网络应用中有两个 CSS 文件：reset.css 和 screen.css。它们以该顺序出现在 html 中（重置然后屏幕）。

在reset.css中，出现如下样式定义：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border-bottom-width:0;
  border-color:initial;
  border-left-width:0;
  border-right-width:0;
  border-style:initial;
  border-top-width:0;
  font-family:inherit;
  font-size:100%;
  font-style:inherit;
  font-weight:inherit;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  outline-color:initial;
  outline-style:initial;
  outline-width:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  vertical-align:baseline;
}

您可以看到span 在此列表中，默认情况下font-size 为 100%。

在我的 screen.css 中，我有以下内容：

dl.labels-left dt span.req {
  display:inline;
  font-size:14px !important;
}

我的 HTML 有以下摘录：

<div>
    <dl class="labels-left">
        <dt class="larger-a-left">
            <label>Name:</label>
            <span class="req">*</span>
        </dt>
...

我遇到的问题是font-size: 14px !important; 被重置文件中的 CSS 覆盖，但仅在 Google Chrome 中。我不知道为什么！

这是一个 Firebug Lite 屏幕截图，显示 font-size 被划掉： Firebug Screenshot http://www.damianbrady.com.au/images/firebug_screenshot.png

为什么我的 reset.css 样式被认为比特定的类定义更重要？

根据我对W3C CSS 2.1 Specificity的理解，这不应该发生！

【问题讨论】：

视觉上不是14px吗？也许检查员不正确地划掉它，但在视觉上它是正确的？
@meder - 你可能会在那里找到一些东西......你可以添加这个作为答案吗？ :) 已确认 - 问题出在 Firebug Lite（和我的愿景）中。从视觉上看，它已经改变了。

标签： css google-chrome firebug css-selectors firebug-lite

【解决方案1】：

也许检查员把它划错了，但在视觉上它是对的？

【讨论】：

干杯 - 当你应得的分数时不想自己回答。 :) 这正是问题所在。
我遇到了这样的问题，而且不仅仅是在检查器中。
@isomorphismes 我用 JS onDocumentReady 解决了它：´(

【解决方案2】：

这是一个 Firebug Lite 错误。 Firebug Lite 正在总结规则中定义的每个选择器的特异性值（而不仅仅是像 CSS 规范所说的匹配的选择器），因此它导致了高估的值。

我刚刚为它填写了一份问题报告。如果您想收到有关我们在此特定问题上的进展的电子邮件更新，请“加注”（订阅）该问题：

http://code.google.com/p/fbug/issues/detail?id=3262

另外，下次对于 Firebug / Firebug Lite 问题，请尝试使用我们的讨论列表或我们的错误跟踪。否则我们可能没有意识到这个问题。

顺便谢谢你的详细报告！

【讨论】：

:) 谢谢 - 下次我一定会看看讨论列表。没想到。