3
1)  #divID input[type='text']
    {
       height:30px;
    }

2)  #divID .ClassName
    {
       height:40px;
    }

divのテキストボックスについては、上記のスタイルを定義しています。2は1よりも具体的ですが、レンダリングされる高さは30pxです。それはどのように機能しますか?

4

1 に答える 1

7

2は1よりも具体的ではありません。1は実際にはより具体的です。

CSSセレクターは3つのレベルに分けられます(この説明の目的のために、実際にはstyle属性とのためにもっと多くのレベルがあります!important)。

IDセレクター#は最高レベルにあります。

クラスと属性、、.ClassName[type=text][id=x]疑似クラスと同様に2番目のレベルにあります。

要素と疑似要素は最下位レベルにあります。

あるレベルのネクタイは次のレベルに移動します。両方のルールセットは、IDとクラス/属性レベルで関連付けられています(.ClassNameおよび[type=text]関連付けられています)。

最初のルールセットにはセレクターの一部として要素がありますが、他のルールセットには要素がありません。したがって、最初のルールセットが最低レベルで勝ちます。

http://css-tricks.com/specifics-on-css-specificity/
http://www.w3.org/TR/CSS21/cascade.html#specificity

于 2013-01-25T04:18:35.073 に答える