CSSセレクタの優先順位

CSSセレクタは優先順位順位があり点数は

指定方法点数
タグのstyle属性 style=“” 1000点
ID #hoge 100点
クラス .hoge 10点
擬似クラス a[href*=“google”] 10点
要素名 ul 1点
擬似要素 :first-child 1点
全称セレクタ * 0点

引用:CSSセレクタの優先順位の計算方法

全称セレクタ(ユニバーサルセレクタ)の扱い

このようにブログの日付の見出しを作る場合、以下の指定で year, month, day に、
背景色や文字色が引き継がれます。


<div class='dialy'>
    <div class='year' >2017</div>
    <div class='month'>3</div>
    <div class='dat'  >1</div>
</div>

.dialy {
    margin:                 10px;
    width:                  80px;
    height:                 50px;
    color:                  #fff;
    background-color:       #7e1083 ;
}

しかし、ユニバーサルセレクタに以下の設定を足すと継承されなくなります。


* {
    color:                  #444;
    background:             #ccc;
}

.dialy {
    margin:                 10px;
    width:                  80px;
    height:                 50px;
    color:                  #fff;
    background-color:       #7e1083 ;
}

0点だからといって無視されるわけではない、何も指定しないのなら0点でも適用されます。
web ページをリセットする目的で、全称セレクタ(ユニバーサルセレクタ)を使いがちですが、
* と html の使い分けに注意しましょう。

* {
    margin:                 0;
    padding:                0;
}

html {
    color:                  #444;
    background:             #ccc;
}

web/cssセレクタの優先順位.txt · 最終更新: 2018/03/18 09:56 (外部編集)
 
特に明示されていない限り、本Wikiの内容は次のライセンスに従います: CC Attribution-Share Alike 4.0 International
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki