リセットCSSとセレクタの得点について
- リセットCSSは決まった形がない。自分の好みに合わせて作る。
- セレクタには優先順位があり、得点計算によって高得点のものが適用される
- 検証ツール→shift+control+P→fullでスクリーンショット
リセットCSSを使用するメリット
- ブラウザごとに異なるデフォルトを打ち消してブラウザ間の表示の差異をなくすことができる
- 意図しない余計なスタイルを打ち消すことで一からCSSを構築することができる
CSSセレクタの優先順位の計算方法
セレクタの種類 | 記述例 | 点数 |
!important | font-size: 140%!important; | 最優先 |
タグのstyle属性 | <div style=”font-size:140%;”> | 1000点 |
id | #title #sub など | 100点 |
class | .main-text .box など | 10点 |
疑似クラス | :hover :nth-child(1) など | 10点 |
疑似要素 | ::before ::after など | 1点 |
要素名 | h1 p div span table など | 1点 |
全般セレクタ | すべての要素に適用 | 0点 |