1

スタイルシートには2つの競合するルールがあります。

#parent > div {
    color: blue;
}

#child {
    color: red;
}

関連するHTMLは次のとおりです。

<div id="parent">
 <div id="child">What color is this text?</div>
 <div>This should just be blue</div>
 <div>Also should be blue</div>
</div>

なぜ#child赤ではなく青なのですか？

スコアリングシステムを正しく適用しているかどうかはわかりません。これが私がそれをした方法です：

  • ルール＃1にはIDとタグがあるため、スコアは次のようになります。[0, 1, 0, 1]
  • ルール＃2にはIDしかないため、スコアは[0, 1, 0, 0]
  • したがって、ルール＃1が勝ち、それは青です

しかし、これは私には間違っているようです。最初のルールは複数の要素に一致します。2番目のルールは1つにしか一致しません！では、2番目のルールはより具体的ではありませんか？

4

1 に答える 1

2

しかし、これは私には間違っているようです。最初のルールは複数の要素に一致します。2番目のルールは1つにしか一致しません！では、2番目のルールはより具体的ではありませんか？

全くない。セレクターが一致する要素が少ないからといって、それがより具体的になるわけではありません。

セレクターのマッチングは、ルールごとではなく、要素ごとに行われます。#child要素に一致するより具体的なセレクターがあるため#parent > div、つまり、そのルールが優先され、それだけです。

直感に反しているように見えますが、それがまさにその仕組みです。#parentこれを回避する1つの方法は、2番目のルールに追加することです。

#parent > div {
    color: blue;
}

#parent > #child {
    color: red;
}
于 2012-02-16T19:11:33.320 に答える