CSS 우선 적용 순위

웹 사이트를 제작하다보면 하나의 태그에 여러가지의 CSS가 적용될 때가 있다.
그럼 이때 같은 요소에 다른 CSS 속성이 중복 설정되어 있다면 어떤 것을 우선 순위로 적용될까?
아래의 순서를 참고해 보자! (상위의 속성부터 강한 순서)

1. 속성값 뒤에 !important가 붙어있는 속성
2. 인라인 스타일로(html에 작성)로 적용되어 있는 속성
3. 선택자에 id가 쓰인 속성
4. class, attribute, pseudo-class로 지정한 속성
5. 태그 이름으로 지정한 속성
6. 부모 요소에 상속된 속성
   
   

✅선택자 점수 매기기

• 점수가 높은 선언이 우선함
• 점수가 같다면, 가장 마지막에 작성된 선언이 우선

• important: 무한대점

div {
	color: red !important;
}

• 인라인 선언 방식: 1000점

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

• id 선택자: 100점

	#name {
	color: red;
}

• class 선택자: 10점

	.name {
	color: red;
}

• 태그 선택자: 1점

  p {
      color: red;
  }

• 전체 선택자: 0점

  * {
      color: red;
  }

• 부정 선택자: 0점

	:not(p) {
	color: red;
}

---

✅점수 매기기 예제

.list li.item
클래스(10) + 태그(1) + 클래스(10) = 21점

.list li:hover
클래스(10) + 태그(1) + 클래스(10) = 21점
✨ 가상클래스 hover도 클래스와 동일한 점수를 가진다.

.box::before
클래스(10) + 태그(1) = 11점
✨ 가상요소는 태그로 취급하여 태그와 동일한 점수를 가진다.

#submit span
id(100) + 태그(1) = 101점

header .menu li:nth-child(2)
태그(1) + 클래스(10) + 태그(1) + 클래스(10) = 21점
✨ nth-child 역시 가상클래스이기 때문에 클래스와 동일한 점수를 가진다.

:not(.box)
부정(0) + 클래스(10) = 10점