8

次のコードでは、h1のより具体的なルールを#inner h1として定義し、＃containerh1も定義されているためより具体的でないルールを定義しました。ただし、＃containerh1が#innerh1の後に置かれると、それが有効になり、＃inner h1は無視されますが、より具体的であるため、無視されるべきではありません。

問題を理解するのを手伝ってください。

CSS：

#inner h1 { font-size:25px; }
#container h1 { font-size:15px; }

HTML： 

<div id="container">
  <div id="inner">
    <h1>Hello World!</h1>   
  </div>
</div>
4

3 に答える 3

8

特異性についてのあなたの考えは少しずれているかもしれません。特異性は文脈自由な考えである必要があります。CSSはHTMLとは独立してロードできるため、どのルールがより「特異的」であるかを推測するためにHTMLドキュメントを必要としないでください。この他の有効な例を考えてみましょう。

<div id="inner">
  <div id="container">
    <h1>Hello World!</h1>   
  </div>
</div>

このスニペットでは、より具体的な最初の推測に反するinner必要があります。これは、解釈にコンテキストが必要であることを意味します（CSSにはありません）。

重要なのは、両方のルールが同じ特異性で見られ（h1で識別される要素の子孫id）、セレクターはより近い子孫に高い優先順位を与えないということです。

同じ特異性の2つのルールが適用される場合、勝者はCSSで宣言された最後のルールです。

于 2012-01-01T06:41:07.383 に答える
3

これらは両方とも同じ特異性を持っており、ご存知のように、スタイルシートに表示される順序は、スタイルルールが適用される決定要因です。

ルールを構造化してより具体的にする方法はさまざまですが、一般的には!important修飾子を使用しないようにします。

詳細については、6.4.3W3のCSS仕様でのセレクターの特異性の計算を参照してください。

于 2012-01-01T06:38:56.147 に答える
-2

これはまったく問題ではありません:)CSSはクラスを次々に解析し、最後のルールが前のルールをオーバーライドします。もちろん、前のルールがより具体的でないか、！importantステートメントが含まれていない場合は、font-size：25px！重要; 最初のルールを上書きして最後のルールを上書きするようにします。それ以外の場合は、クラスの場所を変更するだけです。

于 2012-01-01T06:35:43.607 に答える