[CSS 개요] 선택자 우선순위

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

1. 점수가 높은 선언이 우선함!
2. 점수가 같으면, 가장 마지막에 해석된(더 마지막에 코드로 작성한 내용) 선언이 우선함!

<div id="color_yellow" class="color_green" style="color: orange;">
  Hellow World
</div>

무슨색으로 출력될까? 

div { color: red !important; }
#color_yellow {color: yellow;}
.color_green { color: green;}
div { color: blue;}
* { color: darkblue;}
body { color: violet;}

우선순위로 점수를 매길 수 있음

!important - 9999999999점
인라인 선언 - 1000점 style="color: orange;"
id 선택자 - 100점 #color_yellow
class 선택자 - 10점 .color_green
태그 선택자 - 1점 div
전체선택자 - 0점 *
상속 - x body (body태그가 div요소를 직접 가르키는 것이 아니라 부모요소)

선언순서(코드가 해석된 순서)에 따라 우선한다고 표현합니다

(hover 가상 클래스 10)
(::before 가상 요소 1)
(:nth-child(2) 가상클래스 10)

:not은 점수계산 하지 않음.

• inline이나 !important 는 되도록 피해주는게 좋음. 관리가 어려움