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 Screenshot http://www.damianbrady.com.au/images/firebug_screenshot.png

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

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

Answer 1

也许检查员不正确地穿过它但视觉上是对的？

Answer 2

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

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

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

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

顺便感谢详细的报道！

为什么我的！important属性不适用于Google Chrome？

2 个答案: