CSSセレクタは優先順位順位があり点数は
| 指定方法 | 例 | 点数 |
|---|---|---|
| タグのstyle属性 | style=“” | 1000点 |
| ID | #hoge | 100点 |
| クラス | .hoge | 10点 |
| 擬似クラス | a[href*=“google”] | 10点 |
| 要素名 | ul | 1点 |
| 擬似要素 | :first-child | 1点 |
| 全称セレクタ | * | 0点 |
このようにブログの日付の見出しを作る場合、以下の指定で 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;
}