2017-01-10 12 views
0

は、私が何を意味するかです:`body.className div.className`は` div.className.className2`よりどのように優先されますか?ここ

body.class1 div.class1 { 
 
    color: blue; 
 
} 
 
div.class1.class2 { 
 
    color: red; 
 
}
<body class="class1"> 
 
    <div class="class1 class2"> 
 
    Hello 
 
    </div> 
 
</body>

div.className.className2は、最も具体的な要素を持っているので、私はこれが優先だろうと思っているだろう。しかし、親セレクタを追加することが、追加のクラス名よりも優先されることが分かります。

誰かがこのシナリオを説明するルールを指摘できますか?私はそれをオンラインで簡単に見つけることができない。

+1

https://www.w3.org/TR/css3-selectors/#specificity – Oriol

答えて

3

ルール内の最も深い要素のコンポーネントだけが特異性にカウントされているような印象を受けているようです。それは正しくない、セレクターのすべての要素/修飾子がカウントされます。

  • 最も具体的なルールはbody.class1 div.class1です。このタグは2つのタグ名と2つのクラス名を持っています。

  • div.class1.class2は、2人のクラス名(タイ)を持っているが、それは3クラス名を持っており、クラス名は常にタグ名の無限の数よりも価値があるので、一つだけのタグ名

  • div.class1.class2.class3が勝つでしょう。

ああ、私は今見るhttps://specificity.keegan.st/

+0

でそれを試してみてください。私はセレクターの最も深い子供にいくつかの優先順位が与えられると思ったが、そうは思わない。その有用なリンクをありがとう! –

+0

私はそれがあなたが間違っていた場所だと考えました。あなたの評価は正しいです、最も深い要素だけでなく、セレクター全体のすべての要素です。 –

関連する問題