[CSS] 선택자(Selector) 우선순위

* 0

tag 1

class 10

id 100

inline style 1000

!important 10000

 

전체선택자보다는 태그선택자가 우선되고,

태그선택자보다는 class선택자가 우선되고,

class선택자보다는 id선택자가 우선되고,

id선택자보다는 inline style이 우선되고,

이 모든 것보다도 우선되는 것이 !important 입니다.

옆에 0 ~ 10000 의 숫자는 강력함의 크기를 숫자로 표현해 본 것입니다.

 

inline style은 태그 안에 속성을 주는 것입니다.

가령 <p id="text" style="color:blue"> 에서 p태그에 색상을 blue로 지정한 것입니다.

선택자보다도 태그 안에 속성에 직접 스타일을 준 것이 더 강력합니다.

 

하지만 이보다도 더 우선되는 것이 !important 입니다.

스타일에 #text{color:red !important;} 의 스타일을 지정하면 이게 최우선이 됩니다.