html - CSSプロパティの特異性

Question

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

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

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

score 7 · Accepted Answer

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

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

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

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

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

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

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

1 に答える 1