11. CSS 선택자의 우선순위

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

 

선택자의 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할 지 결정하는 방법입니다. 따라서 점수가 높은 선언이 우선시 되어야하고, 점수가 같으면, 가장 마지막에 해석된 선언이 우선시 됩니다.

 

그럼 예제를 한번 봐보겠습니다.

과연 Hello world에 해당하는 글자색은 무엇일까요?

 

선택자 별로 점수를 부여해보겠습니다.

1. !important(중요도) : 99999999999점 - 거의 쓰지 않음
2. 인라인 선언 : 1000점
3. ID 선택자 : 100점
4. Class 선택자 : 10점
5. 태그 선택자 : 1점
6. 전체선택자 : 0점
7. 상속 : 점수 X

1번에 해당하는 점수가 가장 높아 빨간색으로 Hello World의 색깔을 결정하게 됩니다. 이렇게 CSS우선순위의 점수를 계산 하는 것을 명시도라고 합니다. 용어가 중요하지는 않지만 알아두어도 나쁠 것은 없으니 기억해둡시다.