css 기본 문법4(선택자 우선순위)

들어가기 앞서,

• CSS 기본 문법3에 이어 기본적인 문법 선택자 우선순위에 대해서 다루어보겠다. 

선택자 우선순위

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

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

선택자 점수

• 전체 선택자(*): 0점
• 태그 선택자(div): 1점
• Class 선택자(.color_green): 10점
• ID 선택자(#color_yellow): 100점
• 인라인 선언(style="color: orange;"): 1000점
• !important: ∞

!important의 점수가 가장 높아 red가 적용됨