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

Question

我的网络应用程序中有两个 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 屏幕截图 http://www.damianbrady.com.au/images/firebug_screenshot.png

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

根据我对W3C CSS 2.1 特异性，这不应该发生！

Answer 1

也许检查员错误地划掉了它，但从视觉上看是正确的？

Answer 2

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

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

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

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

顺便感谢您的详细报告！