CSS 선택자 우선순위

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

1. 점수가 높은 선언이 우선함.
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함.


<점수>
! important : 무한
인라인 선언 : 1000점
id 선택자 : 100점
class 선택자 : 10점
태그 선택자 : 1점
전체 선택자 : 0점
상속 : x

 

.list li:hover 는 

클래스 + 태그 + 클래스 이므로 총 21점이다.

가상 클래스도 클래스.

 

.drop::before 는

클래스 + 태그 이므로 총 11점이다

가상 요소는 태그로 취급한다.