[CSS] 적용 우선순위 정리

CSS는 한 테그에 스타일이 중복되게 설정될 수 있는데, 이때 selector가 무엇인지에 따라 특정도(specify)값을 계산하여

값이 높은 순서대로 우선순위가 적용된다.

 

우선순위는 아래와 같다.

 

1. 속성 값으로 !important가 들어간 경우 (가장 우선시 됨)

#important_style {
	color: white !important;
}

 

2. html 태그에 inline으로 직접 style 속성을 적용하는 경우 (1000점)

<div style="color: blue;" class="description">inline으로 style속성 지정</div>

 

3. selector가 #id인 경우 (100점)

#id_style {
	color: red;
}

 

4. selector가 .class이거나 :pseudo (=가상클래스)인 경우 (10점)

.class_style {
	color: black;
}

 

5. selector가 tag인 경우 (1점)

div {
	color: yellow;
}

 

6. 상위 객체의 style속성을 상속받는 경우