多数から1つのhtml要素にスタイル適用されたとき、どのスタイルが採用されるかを論じる。
優先順位を考える軸
2つある。「誰が考えたスタイルか」と「いかに一途に適用先（要素）を指定しているか」である。本論では、これらを整理する。
さらに重要な前提知識がある。
全く同じ序列で2回指定されたスタイルは、後者が優先される。スタイルは指定された順に適用されているので、前者は上書きされて失われてしまう。
誰が考えたスタイルか
開発者が作成したスタイルシート以外にも、「Webページの閲覧者」と「ユーザーエージェント」がスタイルにかかわる。
Webページの閲覧者
ユーザーもスタイルをあてることができる。Chrome拡張機能のStylusは、これを可能にする。
ユーザーエージェント
Webページの情報をユーザーに見せるソフトウェア。Webブラウザもユーザーエージェントだ。実は、Webブラウザはデフォルトでスタイルを適用している。
開発者のスタイルが最優先である。続いて、Webページの閲覧者、ユーザーエージェントである。ただし、スタイル宣言（「プロパティ名: 値」の記述）の末尾に、!importantと記述することで、順番を変更できる。
div {
background-color: blue !important;
}
!importantは、既定の序列をひっくり返す仕様がある。つまり「誰が考えたスタイルか」の軸で並べると、
- ユーザーエージェント（!importantつき）
- Webページの閲覧者（!importantつき）
- 開発者（!importantつき）
- 開発者
- Webページの閲覧者
- ユーザーエージェント
いかに一途に適用先（要素）を指定しているか
ここで、「一途さ」とは。ある要素にスタイルを充てようとする時、いくつか記述方法があるだろう。
/** div要素を全て赤色に */
div {
background-color: red;
}
/** class="content"を含む要素を全て青色に */
.content {
background-color: blue;
}
/** div要素のうち、class="content"を含む要素を全て黄色に */
div.content {
background-color: yellow;
}
<div class="content"></div>は、上記の指定全てを受ける。
1つ目の指定方法は、div要素であればなんでも赤色にする。
2つ目の指定方法はより詳細に思えるが、class="content"が付与されていれば、span要素でも、table要素でも青色にする。
3つ目の方法は、他の2つより限定的に適用されるので、より詳細に適用先を指定しているといえる。
つまり、今回の指定方法では黄色の背景色が適用される。
id属性は、class属性よりさらに一途である。なぜなら、1つのwebページで1つのid属性は一度しか使えないからだ。
詳細度の算出
ブラウザはどのように「一途さ」を算出しているのだろう。以下の記述が同じ要素へ指定しているとして、一見では判断に困るはずだ。
/**
* id="news-area"が付与された要素内の、
* class="news-panel"が付与されたdiv要素内の、
* class="news-panel-1"が付与された要素内の、
* img要素
*/
#news-area div.news-panel .news-panel-1 img {
background-size: cover;
}
/**
* div要素内の、
* id="news-panel"が付与された要素内の、
* class="news-panel-1"が付与された要素内の、
* src="sample.png"が付与された要素
*/
div #news-panel .news-panel-1 img[src="sample.png"] {
background-size: contain;
}
ブラウザは、以下の順番で「詳細度」を比較している。
(1) id属性の個数
(2) class属性、属性セレクタ（[属性名="値"]）の個数
(3) 要素の個数（ただし、ユニバーサルセレクタ（*）は詳細度には関与しないため数えない）
上記の例で詳細度を導くと、前者が1-2-2、後者が1-2-2となる。決着つかず。つまり、後に書かれた方、background-size: containが適用される。仮に、後者が1つでもセレクタが少なければ、前者が採用されていた。
style属性
実は、詳細度には0番目の記述がある。つまり、該当すれば最優先で適用されるスタイルだ。HTML文書内で、要素に直接style属性を付与した場合は、そのスタイルが最も強い。
<div style="background-color: red;"></div>
要素に直接スタイルを書き込むのだから、これほど一途なこともないだろう。
注意！style要素は別に優先度に関係しない
HTML文書に直接スタイルを記述する記法としてstyle要素がある。
<head>
<style>
p { font-size: 13px; }
</style>
<link rel="stylesheet" href="style.css">
</head>
style属性と同様に特別扱いされると思いきや、こちらは優先順位とは関係がない。上記の例で、仮にstyle.css内に「p { font-size: 14px; }」という記述があれば、序列が同じなので、後からインポートされる14pxが適用される。
（HTML文書に複数のスタイルリソースがインポートされていて、同じ序列で同じ要素の同じCSSプロパティへの記述がある場合にも、後から指定されたほうが優先される。）