5

我的网络应用程序中有两个 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中。我不知道为什么！

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

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

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

4

2 回答 2

1

也许检查员不正确地划掉它，但在视觉上它是正确的？

于 2010-07-14T02:22:24.863 回答
0

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

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

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

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

顺便谢谢你的详细报告！

于 2010-07-20T21:50:03.040 回答