css - css スタイルシート階層の重要性

Question

私はいくつかの Google 検索を行ってきましたが、これまでのところ、CSS の順序や重要性に関する私の質問に答えるものは何も見つかりませんでした。

たとえば、インラインは外部をオーバーライドします。とった。!important を外部に追加すると、インラインで上書きされる可能性があります。また、私がこれまでに教わったすべてのことから、後のスタイルは以前のスタイルよりも優先されます。そう：

h1 { font-size: 12pt; }
h1 { font-size: 14pt; }

14pt の font-size をレンダリングします。しかし、これは必ずしもそうではありません。次のようなスタイルを定義したい場合があります。

<div id="content">
    <input class="regular" type="text" />
    <input class="regular" type="text" />
    <input class="long" type="text" />

そしてcssで：

#content input { width: 50%; }
.long { width: 75%; }

しかし、それは常に機能するとは限りません。これらすべてに特定の重要度レベルがあるため、重要度の順序はどこで確認できますか。

input {} 
#content input {}
#content input.regular {}
#content input.long
input.regular {}
input.long {}
.regular {}
.long {}

私は本当に !important を書かなければならないのは好きではありませんが、特に重要な順序がわからない場合は、id やクラスなどを変更する必要がある場合があります。

score 12 · Accepted Answer

検索したい用語は「特異性」です。

セレクターが同じ HTML 要素を選択し、両方がその要素に同じ CSS プロパティを設定しようとする 2 つ (またはそれ以上) の CSS ブロックがある場合、より具体的なセレクターを持つブロックが優先されます。

CSS 3 セレクターの仕様では、具体性を計算する方法が詳しく説明されており、かなり読みやすいです。

ルールを説明するいくつかの優れたブログ投稿もあります。

（2つのブロックに同じ特異性を持つセレクターがある場合、sを使用した例のように、後のブロックのルールが勝つことに注意してください。h1より具体的なセレクターを持つブロックのルールは、後のブロックのルールをあまり具体的でないセレクター)。

score 7 · Accepted Answer

CSS の特異性が発生しています。同じ要素に適用される 2 つの競合するスタイルがある場合、どちらのスタイルが優先されるかを決定する重み付けシステムがあります。詳細については、こちらをご覧ください。

score 4 · Accepted Answer

この場合、ここであなたがすることです

#content input { width: 50%; }
#content .long { width: 75%; }

ID を持つ要素を選択すると優先されるため、その特定の問題がありました。選択に ID を追加し、より具体的にすると問題が解決します

例えば：

#content input.long { width: 75%; }

よりもさらに具体的です

#content .long { width: 75%; }

3 に答える 3