본문 바로가기
FrontEnd/CSS

[css] css적용 우선순위

by staticClass 2021. 6. 2.

우선순위

1. 가장 중요(!important)

모든 선언을 무시하고 가장 우선으로 적용 됨
점수: ♾pt

    div{ color:red !important; /*가장 우선*/

 

 

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

인라인 선언(HTML style 속성을 사용)
점수: 1000pt

<div style="color: orange;">HELLO WORLD</div>

 

 

3. 아이디(ID Selector)

아이디 선택자
점수: 100pt

#color_yellow {
color:yellow;
}

 

 

4. 클래스(Class Selector)

클래스 선택자
점수: 10pt

#color_green {
color:green;
}

 

 

5. 태그(Type Selector)

태그 선택자
점수: 1pt

span {
color: blue;
}

 

 

6. 전체(Universal Selector)

전체 선택자
점수: 0pt

* {
color: darkblue;
}

 

 

7. 상속(CSS Inheritance)

상속 받은 속성은 항상 우선하지 않음

body {
color: violet;
}

댓글