複数のCSSを記述して同一のプロパティを指定するとどれが優先される？ってのを
はっきりと知らんかったのんで、ちょっと調べてみました～。
まずは分かりきった事だけどclassとid。
<style type="text/css">
<!–
#blue {color:blue;}
.red {color:red;}
–>
</style>
</head>
<body>
<p id="blue"class="red">MIDOFF</p>
</body>
</html>
idが勝って、文字色が青色で表示されてます。
<html>
<head>
<style type="text/css">
<!–
.red {color:red;}
#blue {color:blue;}
–>
</style>
</head>
<body>
<p class="red" id="blue">MIDOFF</p>
</body>
</html>
記述の順番を変えてみてもやっぱりidが勝って文字は青色になります。
同じ属性同士だとどう？ってのは…
<style type="text/css">
<!–
.blue {color:blue;}
.red {color: red;}
–>
</style>
</head>
<body>
<p class="red blue">MIDOFF</p>
</body>
</html>
赤色になりました。後から記述をした方の指定が優先されて表示されてます。
あえて<p class="red blue">MIDOFF</p>と順番を逆に指定してみたけど、
<style></style>内、つまりcssの記述の順番で優先が決まるようですな。
直接タグに埋め込んだらどう？
<html>
<head>
<style type="text/css">
<!–
#red {color: red;}
.blue {color:blue;}
–>
</style>
</head>
<body>
<p id="red"class="blue" style="color:green">MIDOFF</p>
</body>
</html>
おおおstyle強し。文字が緑色になりました。直書きの方が強いんですね～！
ということで、属性での優先順位は
style＞id＞classの順みたいです。
これはどのブラウザでも変わらないみたいなので確実かな。
･･･と無事解決したなと思ったのですが、最近こないな奴がおるのを見つけました。
!important
↑をつけると、styleであれ、この記述を入れたスタイルが一番に優先されるという。
試しにさっきの記述の一番弱いclass属性に!importantをつけてみると…
<html>
<head>
<style type="text/css">
<!–
#red {color: red;}
.blue {color:blue !important;}
–>
</style>
</head>
<body>
<p id="red"class="blue" style="color:green">MIDOFF</p>
</body>
</html>
すげー!!!!!classが勝ってしまいましたよ。
というわけで結論は
!important＞style＞id＞classで、
同属性の場合、ｃｓｓの指定は後で書いたものの方が優先される。
というわけで。!important、これホント知らなかった。
これから使わせてもらおうと思うけど、乱発は控えた方がよい感じやね･･･最強すぎる。。。
———————————–
WEB拍手のお礼
T呼さん（笑）
拍手ありがとうですvv
年寄りですよ～もう（^^;）あんなんでよかったらいつでもv
スザクはまたこっそりやってると思う。センパで撮りたいから。材料集めてるし。
そん時は誘ってもよいっす？
ポチポチ拍手押していただいている方々もありがとうございますv
更新全くしてないにも関わらず、ちょこちょこと拍手をいただいているので感謝ですvv
!important＞style＞id＞classだったのか！
idをちょこちょこ使って項目ごとに指定してたから
表示されない何で何でってなってたのでこの記述すっげ勉強になった！ありがとう！
しかし!importantすげーな。裏技やな！
強すぎて使いこなせなさそう（笑）
!importantはハックというやつで、ほんと裏ワザ的なもん。
ハックはあまり使いすぎるのはよろしくないというお約束なんで、
よっぽどの時以外使わないようにしてる～
id指定で表示されへんかったら、直書きしてみたらどうやろ？
それでもあかんかったら直接タグに指定してある可能性が高いでー。
ブログの場合、そういう時はいっそ!importantで（^^）