선택자 우선순위

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

<div id="color_yellow" class="color_green" style="color: orange;"> <!-- 인라인 선언 -->
	Hello world!
</div>

div {color: red !important;}

#color_yellow {color: yellow;}

.color_green {color: green;}

div {color: blue;}

* {color: darkblue;}

body {color: violet;}

- 전체(body) 선택자 > 태그 선택자 > class 선택자 > ID 선택자 > 인라인 선언 > !important  순으로 우선한다.

- 화면에는 !important로 속성이 부여된 빨간색 글자로 출력된다.

- 만약 모든 태그에 class 속성만 부여되어 있으면 위에서 아래 방향으로 우선한다. (맨 아래에 있는 class에 스타일이 적용된다.)

수정할 수 없어서 유지보수하기가 어려우니, 인라인 선언과 !important 선언은 되도록이면 사용하지 말자!