CSSセレクタの優先順位
詳細度という値によってセレクタの優先順位が決まる
詳細度は加点制
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 の > この説明は(少なくとも)今は間違いですよ！
言語化しづらいので何が違うかだけ書くと、1点のセレクタを11個以上使っても10点のセレクタには勝てない(他も同様)
昔からこうだったかは知らないが、少なくとも今は上位のセレクタには勝てないはず
同じ詳細度の場合は後に記述されたセレクタが優先される
そのためCosenseの場合app.css < projectcss < usercssの順番で優先される
詳細度の例
1点
1.cssdiv {}1 + 1 = 2点
2.cssdiv a {}10 + 1 + 10 + 10 = 31点
31.css.line a.link::after {}100 + 100 + 100 = 300点
300.css#foo#bar#baz {}10 + 10000 = 10010点
10010.css.foo { background-color: #333 !important; }CSSの擬似クラスを使いだすとまたややこしいことになるらしい
参考