私の Web アプリには、reset.css と screen.css の 2 つの 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 Specificityに関する私の理解によれば、これは起こるべきではありません!