선택된 선언도 네 관문을 끝까지 통과해야 최종 스타일이 된다

브라우저는 선택자 점수만 비교하지 않는다. 요소에 맞는 선언을 모은 뒤 중요도, specificity, 선언 순서를 차례로 확인한다.

선택자 매칭

현재 요소와 상태에 맞지 않는 규칙은 경쟁 후보에서 먼저 빠진다.

!important 여부와 작성자·사용자·브라우저 규칙의 층을 비교한다.

ID, class·attribute·pseudo-class, type·pseudo-element 수를 a-b-c로 비교한다.

앞선 조건이 모두 같을 때만 소스에서 나중에 적힌 선언이 이긴다.

.card p:hover 0-2-1

#hero 1-0-0 · 승리

개발자 도구에서는 “매칭 여부 → 중요도 → specificity → 선언 위치” 순서로 취소선을 따라가면 예상과 다른 스타일의 원인을 빠르게 찾을 수 있다.