우선순위

우선순위 결정

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성(property)을 우선 적용할 지 결정하는 방법

3가지 방법이 있다. (명시도, 선언 순서, 중요도)

 

1. 명시도 점수가 높은 선언이 우선(명시도)

2. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 순서)

3. 명시도는 '상속' 규칙보다 우선(중요도)

    -->즉, 상속은 간접적으로 스타일이 적용되기 때문에 우선순위에서 떨어진다.

4. !important가 적용된 적용된 선언 방식이 다른 모든 방식보다 우선(중요도)

 

 

 

 

1. 가장 중요(!important)

모든 선언을 무시하고 가장 우선

점수 : 무한pt

div {
	color : red !important;
 }

 

 

2. 인라인 선언 방식(Style Attribute)

인라인 선언(html style 속성을 사용)

점수 : 1000pt

<div style="color:orange;">Hello</div>

cf. 점수가 너무 높기 때문에 유지보수할때 많이 힘들어진다. 그래서 추천하진 않는다.

 

 

3. 아이디(ID Selector)

아이디 선택자

점수 : 100pt

#color_yellow{
	color : yellow;
 }

 

 

4. 클래스(Class Selector)

클래스 선택자

점수 : 10pt

.color_yellow{
	color : yellow;
}

 

 

5. 태그

점수 : 1pt

div {
	color : yellow;
}

 

 

 

6. 전체(Universal Selector)

전체 선택자

점수 : 0pt

* {
	color : yellow;
 }

 

 

 

7. 상속(CSS Inheritance)

상속 받은 속성은 항상 우선하지 않는다.

점수 : 계산하지 않음

body{
	color : yellow;
}