Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
ご存知、ないのですか?  CSS の優先順位   Yumi Ishizaki    20120821
CSSの優先順位の基本 Html内のCSS>ユーザーCSS>ブラウザ標準style Body内Style=“” >head内に直接css>外部css 最後に記述した方が優先的に表示される !important が優先される     あ...
まだあった優先順位IDやclassを組み合わせたセレクタ文字列          ↓その「セレクタ文字列」の塊に点数をつけて    多い方が優先されちゃう!
例:sampleは何色?                  html                           css<div id="blue">  <p class=”nice red text">                ...
仕様 W3Cを「css specificity」でググれば出てくる  かと!   Css3 :http://www.w3.org/TR/2011/REC-css3-     selectors-20110929/#specificity  ...
文字列セレクタに     点数みたいなの付ける                                     個数を連結し   セレクタ文字列                           て、バージョ             ...
セレクタ文字列の仕分   A→ Style=“”    (css3では無くなってる)   B→ id       #hogeとか   C→ class、属性セレクタ、擬似クラス     .class     [title=“”]など...
旧:セレクタ文字列に点数                 ×1000   ×100       ×10       ×1セレクタ文字列          A       B      C         D        合計点    優先度 ...
改:セレクタ文字列に点数                                 小数点じゃなくて                             バージョン表記/日付表記っぽいのを                       ...
注意! ブラウザによって違うこともあるかも     対応してない要素があるので… 基本的に  A(style=“”)>B(#idなど)>C(.classなど)>D     .classが10個以上あっても#idには勝てない!     ...
おわりスマートでメンテしやすいCSSを書いて      モテモテに!
Prochain SlideShare
Chargement dans…5
×

ご存知、ないのですか?CSSの優先順位

Cssのセレクタ要素に点数つけて優先順位きめるお話。specificityの。

256個の.classを並べると#idを上書きの件について調べてみました。
http://tech.uni-q.net/design/2012/08/17/class/

  • Soyez le premier à commenter

ご存知、ないのですか?CSSの優先順位

  1. 1. ご存知、ないのですか? CSS の優先順位 Yumi Ishizaki 20120821
  2. 2. CSSの優先順位の基本 Html内のCSS>ユーザーCSS>ブラウザ標準style Body内Style=“” >head内に直接css>外部css 最後に記述した方が優先的に表示される !important が優先される  あくまで裏ワザ! とっても困った時に使おう!  使いすぎると、どこで!important宣言したか分からな くなって「!important探しの旅」に出ないといけない。 めんどくさい。  あと、重くなる気がする
  3. 3. まだあった優先順位IDやclassを組み合わせたセレクタ文字列 ↓その「セレクタ文字列」の塊に点数をつけて 多い方が優先されちゃう!
  4. 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. 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. 6. 文字列セレクタに 点数みたいなの付ける 個数を連結し セレクタ文字列 て、バージョ それぞれ何個あ をタイプ別に仕 るか数える ン表記のよう 分 なものをつく る B-typeセレクタが1個、 0.1.14.0これはB-typeセレクタ、 C-typeセレクタが14個… バージョン表記/日付表記これはC-typeセレクタ… っぽいのをイメージ… 「14」はイチヨンではなく ジュウヨンと読む
  7. 7. セレクタ文字列の仕分 A→ Style=“” (css3では無くなってる) B→ id  #hogeとか C→ class、属性セレクタ、擬似クラス  .class  [title=“”]など(属性セレクタ)  :hover など(擬似クラス) D→ 要素、擬似要素  Htmlタグ  :first-line、:after など(擬似要素)
  8. 8. 旧:セレクタ文字列に点数 ×1000 ×100 ×10 ×1セレクタ文字列 A B C D 合計点 優先度 低い* 0 0 0 0 0li 良くない説明だった 0 0 0 1 1li:first-line 0 (´・ω・`) 0 0 2 2ul li 0 0 0 2 2ul ol+li 0 0 0 3 3h1 + *[rel=up] 0 0 1 1 11ul ol li.red 0 0 1 3 13li.red.level 0 0 2 1 21#x34y 0 1 0 0 100 優先度Style=“” 1 0 0 0 1000 高い
  9. 9. 改:セレクタ文字列に点数 小数点じゃなくて バージョン表記/日付表記っぽいのを イメージしてセレクタ文字列 A B C D 点数 優先度 低い* 0 0 0 0 0.0.0.0li 0 0 0 1 0.0.0.1li:first-line 0 0 0 2 0.0.0.2ul li 0 0 0 2 0.0.0.2ul ol+li 0 0 0 3 0.0.0.3h1 + *[rel=up] 0 0 1 1 0.0.1.1ul ol li.red 0 0 1 3 0.0.1.3li.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. 10. 注意! ブラウザによって違うこともあるかも  対応してない要素があるので… 基本的に A(style=“”)>B(#idなど)>C(.classなど)>D  .classが10個以上あっても#idには勝てない!  ブラウザによって256個以上あると勝てちゃったりす るようです 例えば「0.1.14.0」の場合は、 「いち点いちよん」じゃなくて 「いち点じゅうよん」って読むと分かりやすいかも
  11. 11. おわりスマートでメンテしやすいCSSを書いて モテモテに!

×