css선택자우선순위

1. 후자 우선의 원칙

뒤에 나오는 CSS가 우선순위가 높습니다

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

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

3. 우선 순위 계산

CSS	점수
inline-style	1000점
id 선택자 #	100점
class ., 가상클래스, 속성선택자	10점
타입, 가상요소 선택자	1점
전체선택자 *	0점

점수가 같다면 후자원칙 적용

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

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

정답: 1.초록색 2.빨간색

3. 중요성의 원칙

!important

❗ important 사용은 좋지 하다.
CSS의 자연스러운 상속을 깨트리기 때문에 오류/버그 발생 시 수정을 어렵게 만듭니다.