스타일 적용 우선순위

같은 요소가 여러 선언의 대상이 될 경우에 어떤 스타일을 먼저 적용할지
결정 하는 방법입니다.

1. 명시도 점수가 높은선언이 우선 됩니다.
2. 명시도 점수가 같은 경우에 가장 마지막에 작성한 선언이 우선 됩니다.
3. 명시도는 상속 규칙보다 우선 됩니다.
4. !important가 적용된 선언 방식이 다른 방식보다 우선 됩니다.
   
   

1. !important

모든 선언을 무시하고 가장 우선 됩니다.
점수 : 무한대

div {
  color : #000 !important;
}

2. 인라인 선언 방식

HTML style 속성을 사용 합니다.
점수 : 1000

<div style = "color : red;"></div>

3. id 선택자

점수 : 100

#color {
  color : #000;
}

4. Class 선택자

점수 : 10

.color {
  color : #000;
}

.color:hover {
  color : #000;
} /*"가상 클래스"는 "클래스" 선택자의 점수를 가집니다.*/

5. Tag 선택자

점수 : 1

header {
  color : #000;
}

header::before {
  color : #000;
} /*"가상 요소"는 "태그" 선택자의 점수를 가집니다.*/

6. 전체 선택자

점수 : 0

* {
  color : #000;
}

7. 상속

상속 받은 속성은 무조건 우선시 하지 않습니다.
점수는 계산하지 않습니다.

body {
  color : #000;
}

/*부정 선택자 :not()은 점수를 가지지 않습니다*/