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; }