선택자 우선순위

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

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

여기서

body {
	color: violet;
}

은 글자의 색은 상속이 되는 요소이니까, body내부의 태그 div는 violet색이 될 여지는 있다.

이제 점수를 살펴보자.

우선순위는

!important > 인라인 선언 > ID선택자 > Class 선택자 > 태그 선택자 > 전체 선택자 > 상속 순서이다.

참고로 상속의 경우는 직접 그 선택자를 가리키는 것은 아니고 부모 요소에 의해 상속되는 것이지만 점수는 별도로 계산하지 않는다.

점수 계산 연습

1. .list li.item : 클래스 list의 하위 요소 중 li요소 이면서 item 클래스인 항목 선택 -> 클래스 + 태그 + 클래스 = 21점

2. .list li:hover : 클래스list의 li선택자에 마우스를 올렸을 때만 동작하는 가상 클래스 hover를 만들어 마우스를 올렸을 때만 선택되는 가상의 선택자를 지정하는 것이다.
   (클래스를 선언하지는 않았지만 하나의 클래스처럼 작동)
   -> 클래스 + 태그 + (가상)클래스 = 21점

3. .box::before : 클래스 box에 가상 요소 before를 만들어 삽입
   -> 클래스 + 요소(태그) = 11점

4. #submit span : 아이디가 submit인 요소의 후손 중 span 태그인 요소를 모두 선택
   -> 아이디 + 요소 = 101점

5. header .menu li:nth-child(2) : header 태그의 후손들중 menu클래스인 요소들 중 li태그 후손 중 2번째 자손(가상 클래스) -> 1점 + 10점 + 1점 + 10점 = 22점

6. h1 : 태그 선택자 1점

7. :not(.box) : 가상 클래스 선택자 10점

Q.
듣는 강의에서 :not(.box)는 box클래스를 부정한 상태로 선택하는 것이고 따라서 not은 가상 클래스 선택자이지만 클래스로 치지않고 안의 .box만 점수로 친다는데
잘 이해가 되지 않는다...