0

私は次のhtmlを持っています:

<div class="main">
  <div class="container">
      <h4 class="test"> Test </h4>
  </div>
</div>​

そして、次の CSS:

.main .container h4 {
 color: red;   

}
.test {
 color: blue;   
}

クラス .test が色のルールを上書きしないのはなぜですか? どうすればこれを達成できますか?

ありがとう

</p>

4

1 に答える 1

7

これは特異性の問題です。

特異性とは、特定のセレクターの重要性です。この場合、最初の宣言は 2 つのクラスと 1 つの要素を使用します。これは、インライン スタイル、#id、またはより多くのクラスを持つものだけがそれを上書きできることを意味します。

クラスに影響を与えたい場合はtest、 を使用できます.main .container .test。これは 3 つのクラスであり、上書きされます。

2 つのものが同じ特異性を持っている場合、たとえば.main .container h4再度使用する場合、ドキュメントの最後にあるものが優先されます。

具体性やドキュメントのどこにあるかに関係なく、上書きする方法があります。それは、!importantたとえば.test { color: blue !important; }. 将来的に問題が発生する可能性があるため、上記の内容を使用できる場合はお勧めしません。

仕様はここで見つけることができます

セレクターの特異性は次のように計算されます。

  • 宣言がセレクタ付きのルールではなく 'style' 属性である場合は 1、それ以外の場合は 0 (= a) (HTML では、要素の「スタイル」属性の値はスタイル シートのルールです。これらのルールにはセレクタがありません。つまり、a=1、b=0、c=0、d=0 です。)
  • セレクター内の ID 属性の数をカウントする (= b)
  • セレクター内の他の属性と疑似クラスの数をカウントします (= c)
  • セレクター内の要素名と疑似要素の数を数える (= d)
  • 特異性は、セレクターの形式のみに基づいています。特に、"[id=p33]" という形式のセレクターは、id 属性が "ID " ソース ドキュメントの DTD 内。

4 つの数 abcd を (基数が大きい数体系で) 連結すると、特異性が得られます。

于 2012-11-13T14:00:05.060 に答える