[HTML/CSS] 선택자 우선순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

→ 점수가 높은 선언 우선.

→ 점수가 같으면 가장 마지막 해석된 선언 우선.

• 상속 - X
• 전체 선택자(*) - 0점
• 태그 선택자(div, span 등) - 1점
• Class 선택자 - 10점
• ID 선택자 - 100점
• inline 선언 - 1000점
• !important - 999999999점

ex)

.list li.item { } 의 경우 class 선택자(10) / 태그 선택자(1) / class 선택자(10) 해서 총 21점

.list li:hover{ } 의 경우 class 선택자(10) / 태그 선택자(1) / 가상 class 선택자(10) 해서 총 21점

#list div { } 의 경우 ID 선택자(100) / 태그 선택자(1) 해서 총 101점

:not(.box) { } 의 경우 가상 클래스 선택자 / 클래스 선택자 해서 20점으로 착각할 수 있는데 not의 경우 점수를 계산하지 않는다. 따라서 해당 선택자의 경우 .box의 클래스 선택자 만으로 10점.