CSSの優先順位

HTML要素は、複数のCSSルールで設定できます。

<p id="proverb" class="message">
  何の為に生まれて、何をして生きるのか、答えられないなんてそんなのは嫌だ
</p>

タグ名の使用

p { color: blue; }

.classの使用

.message { color: green; }

#idの使用

#proverb { color: red; }

ブラウザは<p> </p>に1つの色しか設定できないため、CSSに優先順位を付けて選択します。

上記の例では、#id が最も優先されるため、パラグラフの色は赤になります。

CSSルールの順序

同様のセレクターがCSSにある場合、最後に定義されたセレクターが優先されます。

p { color: green; }
p { color: red; }
/* Paragraphs will be red */

100小節

CSSルールがどれほど「強力」であるかを理解する簡単な方法の1つは、セレクターの特異性を測定することです。

指定方法	評価値
#id	100
.class	10
タグ	1
Inline Styles	1000
属性セレクタ(p[title])	10
擬似要素(p::before)	1
ユニバーサルセレクタ(*)	0
!important	最上位。同列の場合、評価値計算

• #id セレクターは100の価値があります
• .class セレクターは10の価値があります
• tag セレクターは1の価値があります CSSルールが表示される順序に関係なく、「スコア」が最も高いセレクターが優先されます。

#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}
<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>

競合を回避する方法

CSSを作成しているときに、同じプロパティが複数回適用される競合するルールを作成するのは簡単です。

それを回避するには：

• クラスのみを使用する: #idでstyleを設定しない。
• 単一のHTML要素に複数のクラスを適用することは避けてください。記述せず<p class="big red important">、<p class="title">より意味的に説明的なものにします。
• 次のようなインラインスタイルを使用しないでください<div style="background: blue;">
• !importantを使用しない。