====== CSSセレクタの優先順位 ======

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

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

引用：[[http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666|CSSセレクタの優先順位の計算方法]]

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


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

{{:chapter_1:web_0011.png}}\\ 

<sxh html; title:html; gutter:false; toolbar:false>
<div class='dialy'>
    <div class='year' >2017</div>
    <div class='month'>3</div>
    <div class='dat'  >1</div>
</div>
</sxh>

<sxh css; title:css; gutter:false; toolbar:false>
.dialy {
    margin:                 10px;
    width:                  80px;
    height:                 50px;
    color:                  #fff;
    background-color:       #7e1083 ;
}
</sxh>

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

{{:chapter_1:web_0012.png}}\\ 

<sxh css; title:css; gutter:false; toolbar:false>
* {
    color:                  #444;
    background:             #ccc;
}

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

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

<sxh css; title:css; gutter:false; toolbar:false>
* {
    margin:                 0;
    padding:                0;
}

html {
    color:                  #444;
    background:             #ccc;
}
</sxh>