• CSS 언어에는 충돌 시 어떤 규칙이 우선하는지 규칙이 있습니다.
• 이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity)라고 합니다.

1. 후자 우선의 원칙 뒤에 나오는 CSS가 우선순위가 높습니다
2. 구체성(명시도)의 원칙
3. 중요성의 원칙

1. 후자우선의 원칙

• 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따르게 됩니다.

2. 구체성의 원칙(Specificity: 명시도)

• 어떤 선택자가 더 구체적인가?

2.1 가중치

1. inline 스타일 속성
2. id #
3. class ., 가상 클래스, 속성선택자
4. type(tag), 가상 요소 선택자

위와 순서대로 가중치가 높습니다.

2.2 우선 순위 계산

[퀴즈] 글자의 색상을 생각해보세요!

<div>
  <p id="id" class="class">
		1. 이 글자는 어떤 색일까요?
	</p>
  <p id="id" class="class" style="color:red">
		2. 이 글자는 어떤 색일까요??
	</p>
</div>

div #id{
  color:green;
}
p{
  color:black;
}
#id{
  color:blue;
}
.class{
  color:yellow;
}