Ich habe zwei CSS-Dateien in meiner Webanwendung: reset.css und screen.css. Sie erscheinen in dieser Reihenfolge im HTML-Code (Zurücksetzen, dann Bildschirm).

In der reset.css tritt die folgende Stildefinition auf:

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;
}

Sie können sehen, dassspan ist in dieser Liste und hat standardmäßig einfont-size von 100%.

In meiner screen.css habe ich folgendes:

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

Mein HTML hat den folgenden Auszug:

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

Das Problem, das ich habe, ist, dass diefont-size: 14px !important; wird vom CSS in der Reset-Datei überschrieben,aber nur in Google Chrome. Ich kann nicht herausfinden warum!

Hier ist ein Firebug Lite-Screenshot mit demfont-size durchgestrichen:Firebug Screenshot http://www.damianbrady.com.au/images/firebug_screenshot.pn

Warum ist mein reset.css-Stil wichtiger als die spezifische Klassendefinition?

Nach meinem Verständnis von W3C CSS 2.1 Spezifität, das sollte nicht passieren!