CSS基礎講座3 スタイルの優先順位について

前回、前々回のエントリーでセレクタと値についての基礎をかいたのですが、今回は記述したセレクタが適応される優先順位についての簡単な解説をさせて貰います。

…ここからが続き

基本的なスタイルの優先順位

スタイルの基本的な優先順位は、「後に記述したスタイルが優先される」って事です。 読み込む順序は、上から読み込まれていくので

#contents p span	{
	color: #CCC;
}
#contents p span	{
	color: #000;
}

上記の用に書いたとしたら、下に書かれているcolor: #000が優先され、文字は黒に色になるって感じです。

例外のスタイルの優先順位

先ほど「後に記述したスタイルが優先される」と書きましたが、例外の場合があります。

それが子孫セレクタを使った場合の記述です。

#contents p.text span	{
	color: #CCC;
}
#contents p span	{
	color: #000;
}

上記の用にスタイルが記述された場合、後に記述したcolor: #000が適応されるのではなく、上記に書いたcolor: #CCCが適応されます。

理由として、スタイルには優先順位を決定するルールとして、個別性の高いスタイルを優先して適用するからです。

このようなルールがあるので、ちゃんと理解をしていれば上手い事子孫セレクタを使う事によって、無駄なclass idを指定する必要がなくなるって事なんですよね。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article