이처럼 CSS는 같은 태그에 중복해서 스타일이 지정되더라도 개별성 규칙 점수에 의해 적용될 스타일이 결정된다는 사실을 기억하세요.
TIP | 개별성 규칙 점수를 계산해 주는 https://specificity.keegan.st 사이트를 활용하면 점수를 쉽게 확인할 수 있습니다.
수코딩의 조언
CSS의 선택자를 지정할 때 일일이 개별성 규칙 점수를 계산하는 건 현실적으로 매우 어렵습니다. 그래서 실무에서는 선택자를 최대한 자세하게 적을수록 점수가 더 높다고 생각하고 선택자를 지정하면 편합니다. 예를 들어, 다음과 같은 HTML 태그 구조가 있다고 합시다.
<div id="main">
<div class="sub">
<p>lorem</p>
</div>
</div>
p 태그를 선택할 때 단순하게 p{}라고 지정하는 것보다는 .sub p{}라고 지정하는 것이 점수가 더 커서(클래스 선택자 점수 + 태그 선택자 점수) 우선순위가 높습니다. 그리고 .sub p{}보다 #main .sub p{}가 훨씬 더 우선순위가 높고요. 따라서 하나의 태그를 선택할 때는 부모 선택자부터 하위 선택자나 자식 선택자 조합으로 자세하게 적으면 우선순위가 높아지게 됩니다.