CSS 선택자 우선순위 점수

선택자 우선순위

css에서 같은요소가 여러 선언의 대상이 됬을때 우선적으로 적용할것을 결정

1. 점수가 높은 선언이 우선

2. 동점시 가장 마지막에 작성된 선언이 우선

 

!important : 10000점 / 남용금지 (인라인스타일로 적용된 내용 변경시에만 사용)

금기! 진짜 정 위급한 상활일때만

인라인 스타일 1000점

 

 

아이디 선택자 100점

클래스 선택자 10점

태그 선택자 1점

(가상요소 before, after 은 1점)

.section01 + p 는 몇점일까?

클래스 선택자 10점 + 태그 선택자 1점 = 11점

 

 

추가

 

- 가상클래스 선택자 (:hover, :first-child, :nth-child(n), :last-child )10점
- .gnb>li:not(:first-child) 첫번째를 제외한 나머지 형제선택
- 가상요소 선택자 ( :before, :after )1점