■概要
CSSは、ある属性が重複されて指定される場合があります。
CSSにはどんな属性が優先されるかが決まっています。
優先順位は以下になります。
1. 属性の値に!importantを指定した場合
2. HTMLでstyleを直接に制定した場合
3. #idで指定した場合
4. .クラス, :抽象クラスで指定した場合
5. タグ名で指定した場合
6. 上位オブジェクトを継承した場合
同じ優先順位の場合は、親子関係が多い場合が優先されるし、すべての設定が一致する場合は後勝ちになります。
!important
優先順位を無視して摘要したい属性ある場合に、属性値の後ろに!importantを付けます。
.normal { color: blue }
.compulsion{ color: black !important }
!importantは優先順位だけではなく、デザイナーとエンジニア間のコミュニケーションに重要な属性であることを表す時もあります。
■例
<html>
<head>
<style>
#my-box .text{ color: black }
.black{ color: red }
.important-black{ color: red !important }
</style>
</head>
<body>
<div id=”my-box”>
<div class=”text”>My text 1</div>
<div class=”text black”>My text 2</div>
<div class=”text important-black”>My text 3</div>
</div>
</body>
</html>
出力結果
My text 1My text 2My text 3
