우선 순위

우선 순위

 

• 어떤 CSS 속성을 우선으로 할지 결정하는 방법

 

 

1. 명시도

 

- 명시도 점수가 높은 선언이 우선

- 전체 (0점) < 태그(요소, 1점) < class(10점) < id(100점) (명시도 점수)

 

1. .fruits li.item {} /* class(10) + 태그(1) + class(10) = 21pt*/
2. .fruits::before {} /* class(10) + 가상요소(1) = 11pt*/
3. :not(.fruits) {} /* 부정선택자(not)은 계산 X + class(10) = 10pt*/
//가상 class(:)는 원래 10점인데 :not(부정 선택자)만 점수 없다

=> 1. -> 2. -> 3.

 

 

2. 선언 순서

 

- 명시도 점수가 같은 경우 파악

- 가장 마지막에 작성한 선언이 우선

 

 

3. 중요도

 

- 명시도는 '상속' 보다 우선

 

 

4. !important

 

- !important가 적용된 선언이 모든 방식보다 우선