今までは漠然と以下の感じと思っていた

• 基本的に 下に書かれたものが優先
• CSSはより 詳細なセレクタのほうが優先
• 詳細なセレクタはできるだけ下に書くようにする

考え方は間違ってはいないと思うが、詳細を調べたのでメモとして残しておく。

セレクタには詳細度というものがあり、セレクタの設定によって詳細度が変化し、セレクタの詳細度によって優先されるスタイルが上書きされる。
各セレクタを組み合わせて記述することが多いが組み合わせることで詳細度に変化が生じる。
詳細度の高い方が優先される。(数値の大きいものが優先される)

詳細度の分類及び具体的な考え方

• 要素セレクタの数量より1つのクラスセレクタが優先
• クラスセレクタの数量より1つのIDセレクタが優先
• 各セレクタの数量より1つのインラインや!imporantが優先

詳細順位	セレクタ名	詳細数値
1	!important	1.0.0.0.0
2	インライン記述(style属性)	0.1.0.0.0
3	idセレクタ	0.0.1.0.0
4	属性セレクタ・classセレクタ・擬似クラス	0.0.0.1.0
5	要素セレクタ・擬似要素	0.0.0.0.1
6	ユニバーサルセレクタ	0.0.0.0.0