今日習ったこと:メモ:css cssの順番など

セレクタの指定方法

クラスセレクタ
クラス属性が記述されている要素を指定
IDセレクタ
ID属性が記述されている要素を指定
⼦供セレクタ
特定の親要素の⼦要素を指定
隣接セレクタ
要素名の後に「+」をつけて指定

targe="_blank" を持つ要素だけ、ふと文字にしなさいという命令。

リンク

a[target="_blank"]{
font-weight:bold;
}

しかし

属性セレクタ
任意の属性とその属性値を指すセレクタ

特定の属性と属性値を指定

IE6が対応していないので、使うことはあまりない。ただ今後、、、?



スタイルの詳細度

ある要素に対して複数のスタイルが競合する場合、詳細度と継承によって、適用されるスタイルが決まる
スタイルの詳細度
• 個別的なスタイルが優先される


こんにちは

p{ color:#f00;
}
.main{
color:#00f
}

一方では赤といい、一方では青という。この競合は、どちらが優先されて適用されるのかというと、、、、
個別的なスタイルが、優先されます。

すなわち、.mainである。


優先順位低
ユニバーサルセレクタ(*)<タイプセレクタ(p h1)<クラスセレクタ(.main)or属性セレクタa[target...]<IDセレクタ
(#ID) 優先順位高

継承されるプロパティと継承されないプロパティがあるので注意が必要

body{
color:#f00;}

こんにちわん

ボディにたいして、かけた文字の色が、

 h1 

に、引き継がれていく。
だが、プロパティによっては継承されない。
究極的には、cssの仕様書による。



詳細度が同じ場合は、後から読み込んだスタイルが適用される。

link要素や、@importで読み込んだ場合も同様!
/* base.css */
h1{color:red}

この場合、色は緑ですよ。

後から読み込んでいるから。下にあるから。