CSSを設計する際に、理解しておきたいのが「CSSの詳細度（Specificity）」です。

基本的には、CSSは後から宣言されたルールが適用されます。

しかし詳細度が高いセレクタは、宣言された順番に関係なく優先されます。

CSSの詳細度

CSSの詳細度を高い順に並べると、下記の通りになります。

• !important
• style属性
• IDセレクタ
• クラス・属性・擬似クラスセレクタ
• 要素型セレクタ・擬似要素
• ユニバーサルセレクタ

1.!important

!importantは、最も詳細度が高くなる宣言です。 なるべく使用を避けるべきとされています。

p {
 color: red !important;
 color: blue;
}

2.style属性

style属性とは、htmlの中にインライン記述するCSSのスタイルです。 レイアウトや装飾を修正する際、htmlとCSSの一元管理がむずかしくなるので、 !importantと同様になるべく使用を控えるべきとされています。

3.IDセレクタ

IDセレクタは、1ページに対して1度しか使えない固有のセレクタです。 JavaScriptを使う場合に割り当てることがありますが、詳細度が高いのでCSSでの使用は控えるべきとされています。

/* ID */
#box {
 color: red;
}

4.クラス・属性・擬似クラスセレクタ

これらのセレクタは、同じドキュメント内で何度も使用することができます。

詳細度が同じなので、後から書いたものが優先されます。

/* クラス */
.box {
 color: red;
}

/* 属性 */
a[target="_blank"] {
 color: red;
}

/* 擬似クラス */
.box:hover {
 color: red;
}

5.要素型セレクタ・擬似要素

要素型セレクタは、