5

私が理解しているように、要素は最も具体的ではありません。(要素と ID)。一般的にセレクターの特異性を理解するのを手伝ってください。

<div id="container">
    <div id="firstDiv">FIRST Div inside CONTAINER</div>
    <div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>

body{
    width: 780px;
    margin: 20px auto;
}
#container > div:not(:last-of-type){
    margin-bottom: 0px; /*How its more specific than ID selector below? */
}
#container {
    border: 15px solid orange;
    padding: 10px;
}
#firstDiv{
    margin: 50px; /*This is not taking effect*/
    border: 5px solid blueviolet;
}
#secondDiv{
    border: 5px solid brown;    
}

http://jsfiddle.net/t2RRq/

4

2 に答える 2

14

CSS の特異性を理解するには、The Specificity Warsを読んでください。便利なリファレンス シートもあります。

したがって、セレクター like#fooには1,0,0特異性があり、要素セレクター likepには0,0,1特異性があります。100これら 2 つのうち、より大きいID セレクターが「勝ち」1ます。

疑似要素と疑似クラスも含むより具体的な (heh) バージョンは、ここにあります: http://www.standardista.com/css3/css-specificity/

于 2012-02-16T12:25:33.523 に答える
2

ルールを適用する場合、セレクターの特異性は、キー セレクターだけでなく、すべての単純なセレクター (コンビネーターによってリンクされている) をカウントすることによって計算されます。つまり、これら 2 つのセレクターを比較しているだけではないということです。

div
#firstDiv

しかし、これら 2 つのセレクターを比較しています。

#container > div:not(:last-of-type)
#firstDiv

ここで、最初のセレクターはより具体的です。

  • IDセレクター、#container

  • 型 (要素) セレクターdiv; と

  • 疑似クラス。この場合は:last-of-type; 疑似クラス自体は:not()セレクターの特異性にカウントされません

一方、2 番目のセレクターは ID のみで構成されます。最初の例のようなコンビネーター自体は>、セレクターの特異性にカウントされないことに注意してください。

セレクターの仕様には、セレクターの特異性を計算する方法をカバーするセクション全体があります。

于 2012-02-16T12:23:56.307 に答える