CSS 선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우,

어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법입니다.

구체적인 규칙은 아래와 같습니다.

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

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

 

위에 예시처럼 과연 hello는 어떤 색으로 나올까요?

답은 red입니다.

 

점수 시스템은 아래와 같습니다.

!import - 99999점

인라인 선언(style="color:orange;") - 1000점

id 선택자(#color_yellow) - 100점

class 선택자(.color_green) - 10점

태그 선택자(div) - 1점

전체 선택자(*) - 0점

body - 상속이라 점수 계산 안 함