Mais conteúdo relacionado
Mais de Yumi uniq Ishizaki (11)
ご存知、ないのですか?CSSの優先順位
- 4. 例:sampleは何色?
html css
<div id="blue">
<p class=”nice red text"> 0.0.0.1
p {color:green;} /*?点*/
sample #blue p {color:blue;} /*?点*/
0.1.0.1
</p> p.nice.red.text {color:red;} /*?点*/
0.0.3.1
</div>
sample
点数が多い「セレクタ文字列」が
表示されるよ!
- 5. 仕様
W3Cを「css specificity」でググれば出てくる
かと!
Css3 :http://www.w3.org/TR/2011/REC-css3-
selectors-20110929/#specificity
Css2:
http://www.w3.org/TR/CSS21/cascade.html#
specificity
CSS3とCSS2の違いは、「Style=“”」があるか無
いかの差だけっぽい
- 6. 文字列セレクタに
点数みたいなの付ける
個数を連結し
セレクタ文字列 て、バージョ
それぞれ何個あ
をタイプ別に仕
るか数える
ン表記のよう
分 なものをつく
る
B-typeセレクタが1個、
0.1.14.0
これはB-typeセレクタ、 C-typeセレクタが14個… バージョン表記/日付表記
これはC-typeセレクタ… っぽいのをイメージ…
「14」はイチヨンではなく
ジュウヨンと読む
- 7. セレクタ文字列の仕分
A→ Style=“”
(css3では無くなってる)
B→ id
#hogeとか
C→ class、属性セレクタ、擬似クラス
.class
[title=“”]など(属性セレクタ)
:hover など(擬似クラス)
D→ 要素、擬似要素
Htmlタグ
:first-line、:after など(擬似要素)
- 8. 旧:セレクタ文字列に点数
×1000 ×100 ×10 ×1
セレクタ文字列 A B C D 合計点 優先度
低い
* 0 0 0 0 0
li 良くない説明だった
0 0 0 1 1
li:first-line 0 (´・ω・`)
0 0 2 2
ul li 0 0 0 2 2
ul ol+li 0 0 0 3 3
h1 + *[rel=up] 0 0 1 1 11
ul ol li.red 0 0 1 3 13
li.red.level 0 0 2 1 21
#x34y 0 1 0 0 100 優先度
Style=“” 1 0 0 0 1000 高い
- 9. 改:セレクタ文字列に点数
小数点じゃなくて
バージョン表記/日付表記っぽいのを
イメージして
セレクタ文字列 A B C D 点数 優先度
低い
* 0 0 0 0 0.0.0.0
li 0 0 0 1 0.0.0.1
li:first-line 0 0 0 2 0.0.0.2
ul li 0 0 0 2 0.0.0.2
ul ol+li 0 0 0 3 0.0.0.3
h1 + *[rel=up] 0 0 1 1 0.0.1.1
ul ol li.red 0 0 1 3 0.0.1.3
li.red.level 0 0 2 1 0.0.2.1
#x34y 0 1 0 0 0.1.0.0 優先度
Style=“” 1 0 0 0 1.0.0.0 高い
- 10. 注意!
ブラウザによって違うこともあるかも
対応してない要素があるので…
基本的に
A(style=“”)>B(#idなど)>C(.classなど)>D
.classが10個以上あっても#idには勝てない!
ブラウザによって256個以上あると勝てちゃったりす
るようです
例えば「0.1.14.0」の場合は、
「いち点いちよん」じゃなくて
「いち点じゅうよん」って読むと分かりやすいかも