CSS 기초 - 선택자 우선순위 점수(CSS Property-specificity)

CSS 작성시, 같은 요소가 여러번 중복 선언 될 경우에 어떤 CSS속성이 우선 되는지 결정되는 점수이다.

기초적이지만 CSS 작성에 필수인! 선택자 우선순위 점수를 알아보자.

 

 

 

 

선택자 우선 순위별 점수

 

아이디      클래스        태그       전체

ID (#)   >  class (.)   >   tag    >    *

100점        10점          1점        0점

 

 

 

 

 

!important, inline 선택자 & 우선 순위 선택자 특징

 

 

 

1. !important가 다른 모든 선언보다 가장 우선적용 됨. (중요도 때문)

 

2. 태그 옆에 직접 기술하는 inline 선언 방식이 두번째로 우선 적용되지만(1000점)

inline에 style을 직접 지정하는 것은 유지 보수가 어렵기 때문에 추천하지 않는다.

/* inline안에 style 선언 예시(비추천) */

<div style="color:tomato; font-size:20px">inline 선택자</div>

 

 

우선 순위 선택자 특징

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

2. 점수가 같은 경우, 가장 마지막에 선언된 것이 우선 됨.

3. 명시도(=점수)는 상속규칙보다 우선 됨.