본문 바로가기
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;
    }

댓글