CSSセレクタの優先順位
https://gyazo.com/dfb1f9e8506a2c80026e1d676084933d
詳細度は加点制
1点
要素セレクタ
例) <div id="foo">に対応するdiv
擬似要素
10点
例) <div class="foo">に対応する.foo
例) [href^="https://scrapbox.io]
例) :after
100点
例) <div id="foo">に対応する#foo
1000点
htmlのstyle属性（インラインスタイル）
例) <div style="color: black">
10000点
点数に関係しないもの
CSSの結合子
例) div > aの>
この説明は(少なくとも)今は間違いですよ！綾坂こと.icon
言語化しづらいので何が違うかだけ書くと、1点のセレクタを11個以上使っても10点のセレクタには勝てない(他も同様)
昔からこうだったかは知らないが、少なくとも今は上位のセレクタには勝てないはず
同じ詳細度の場合は後に記述されたセレクタが優先される
そのためCosenseの場合app.css < projectcss < usercssの順番で優先される
詳細度の例
1点
code:1.css
div {}
1 + 1 = 2点
code:2.css
div a {}
10 + 1 + 10 + 10 = 31点
code:31.css
.line a.link::after {}
100 + 100 + 100 = 300点
code:300.css
10 + 10000 = 10010点
code:10010.css
.foo { background-color: #333 !important; } CSSの擬似クラスを使いだすとまたややこしいことになるらしいMijinko_SD.icon 参考