1) #divID input[type='text']
{
height:30px;
}
2) #divID .ClassName
{
height:40px;
}
divのテキストボックスについては、上記のスタイルを定義しています。2は1よりも具体的ですが、レンダリングされる高さは30pxです。それはどのように機能しますか?
1) #divID input[type='text']
{
height:30px;
}
2) #divID .ClassName
{
height:40px;
}
divのテキストボックスについては、上記のスタイルを定義しています。2は1よりも具体的ですが、レンダリングされる高さは30pxです。それはどのように機能しますか?
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