最近CSSの見直しをして色々新しい発見をするので今日もエントリーします。 ID、class、属性名には個別のポイントが設定されていてその合計値が高いものから優先されていきます。
その件について詳しく書く前に基本のおさらい。
スタイルシートは下に書いてあるものほど優先されます。
普通は外部スタイルの読込を一番最初して、次にHEADの中にスタイルを書き、タグに直書きするので、
タグ内スタイル>HEAD内スタイル>外部スタイル
の順で優先されると思います。(今回はユーザースタイル、ブラウザスタイル、!importantについては一先ず置いておきます。)
今までは一番最後に読込んだスタイルが適用されるって思い込んでたのですが、どうもそうではないらしい。
いや、うすうすは感ずいていたんですよ、なんかID付の属性が優先されてるなぁーって。
はい、ここから本題です。
id 100ポイント
class 10ポイント
属性名 1ポイント
はい、本題終了。
こういう計算でなりたってます。例を書くとこんな感じ。
/*こっちの方が優先されます。*/
#left p.contents a{
color:#F00;
font-size:0.8em;
}
/*こっちは無視されます*/
#left p a{
color:#aaa;
font-size:2em;
}
以上です。そんだけです。 そろそろムーバブルタイプに引っ越そうかなぁ。