CSSで同じクラス名に対して複数の設定がされているケースはライブラリなどを入れていると多く発生すると思います。
そんな時、どの設定で最終的にレンダリングされるかは、なかなか謎なところが多いです。
そこんところを調査してみます。
環境
< !DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="common.css"/>
<link rel="stylesheet" href="common2.css"/>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<div class="no1">No.1</div>
</body>
</html>
.no1{
border:1px solid red;
width:200px;
height:200px;
margin:20px;
padding:8px;
}
.no1{
border:1px solid green;
width:200px;
height:200px;
margin:20px;
padding:8px;
}
読み込み順番調査
まず、ほぼ同じ内容が書かれているcssファイルを２つ読み込んだ場合、どのような結果になるでしょう？
上記の場合は、common2.cssの設定が反映されています。
<link rel="stylesheet" href="common.css"/>
<link rel="stylesheet" href="common2.css"/>
# 入れ替えてみる
<link rel="stylesheet" href="common2.css"/>
<link rel="stylesheet" href="common.css"/>
なんとなく想像がついてましたが、どうやら、後で読み込まれた設定で、上書きしていると思われます。
次は、セレクタの情報を増やしてみます。
<link rel="stylesheet" href="common.css"/>
<link rel="stylesheet" href="common2.css"/>
div.no1{
border:1px solid red;
width:200px;
height:200px;
margin:20px;
padding:8px;
}
こうすると、先に読み込まれた方が反映されます。
http://www.htmq.com/csskihon/007.shtml
このサイトを見ると分かりますが、selector部分に書かれる情報には基づいて優先順位が決まるそうです。
優先順位の基準
ID属性
class属性
タグ
style属性
important指定
上記のような指定でポイントが加算されて、一番ポイントの高い設定が優先になるようです。
同点ポイントの場合が後述が上書きするようですね。
複雑な設定の場合
それでは、タグに２つ以上のclass名があり、
css２つに別のclass指定がある場合はどちらが優先されるでしょう？
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="common.css"/>
<link rel="stylesheet" href="common2.css"/>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<div class="no1 no2">No.1</div>
</body>
</html>
.no1{
border:1px solid red;
width:200px;
height:200px;
margin:20px;
padding:8px;
}
.no2{
border:1px solid green;
width:200px;
height:200px;
margin:20px;
padding:8px;
}
この場合は、common2.cssが優先されるみたいです。
文字列が違っても、ポイントは同じようですね。
デバッグツール
最近のブラウザであれば、どれでもデバッグツールが使えるので、ソースを書き換えていちいちリロードしなくても、その場で設定変更してリアルタイムに確認できるので、開発効率はこれでアップできますね。
属性別のポイント数について
http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
このサイトにポイント数が記載されてました。
importantなどの指定が書かれていないので、詳細を調べないといけませんね。
懸念点
「width」などのstyleはタグ属性としても存在する場合があり、これの優先順位も知っておかないとトラブル可能性大です。
あと、javascriptでstyleを書き換えた時は、どうでしょう？
まだまだ完璧ではないので、謎は深まるばかりです。
本当に奥深いですね。
