WHAT CSSには詳細度(Specificity)という概念があります. 詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。 詳細度 - CSS | MDN 簡単に言うと,「スタイルが重複したとき,どのスタイルを優先するか」の優先度を定量評価したものになります. 詳細度はa, b, cのようなカタチで表されます. 細かい説明するのは面倒なので,ざっくりと以下にリストアップします. 全称セレクタ: a=0, b=0, c=0 * 要素,擬似要素: a=0, b=0, c=1 li, ::before, ::first-line, etc. クラス,擬似クラス,属性: a=0, b=1, c=0 .classname, :first-child, [type=password], etc. id: a=1, b=0, c=0 #idname あと
![エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/040b52ff36704027a66269ef315a83a1b5ce7eba/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgyJUI4JUUzJTgzJThCJUUzJTgyJUEyJUUzJTgxJUFGJUUzJTgyJTgyJUUzJTgxJTg2JUU0JUI4JTgwJUU1JUJBJUE2Q1NTJUUzJTgxJUE4JUUzJTgxJUExJUUzJTgyJTgzJUUzJTgyJTkzJUUzJTgxJUE4JUU1JTkwJTkxJUUzJTgxJThEJUU1JTkwJTg4JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJTg4JUUzJTgxJTg2JTIwLSUyMCVFOCVBOSVCMyVFNyVCNCVCMCVFNSVCQSVBNiVFNyVCNyVBOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzE1Mzc4MTZkNzUzMTM3MGJhNTc2N2E4NWZkMWRjNWM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaXp1bWluNTIxMCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzEwZjExZWRjYmQwNGVkMDg1MGZkYTI1N2EyNDViNGY%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D2834994914d5048b87be69c51774744f)