CSS - 선택자 (Selector) 우선순위

1. 기복적으로, 나중에 오는 선언이 덮어씀 
2. 선택자 우선순위

선택자 우선순위

 

요소 선택자   <   클래스(.) 선택자 (+가상클래스)    <   아이디(#) 선택자

 

 

올림픽 국가별 메달 순위를 매길 때 처럼,

각 점수를 합산하여 매긴다.

 

금) #

은) . / :

동) element

 

#gnb.tab-nav

금1 / 은1

 

header.main-header

동1 / 은1 

 

 

#gnb.tab-nav ul

금1 / 은1 / 동1

 

#gnb.tab-nav ul:last-child

금1 / 은1 / 동1 / 은1

= 총 금1 / 은2 / 동1

 

 

 

+)

 

선택자 우선순위 rule을 break하는 방법들이 존재함.

 

>> 정말 어쩔수 없을때만 사용할 것. 안좋은거임.

 

1 / 인라인 스타일 적용

<span style="color: red">hello</span>

> 어떠한 스타일보다 가장 강력히 적용됨.

 

 

 

2/ !important 선언

- 인라인 스타일보다 더 강력함.

- 무슨일이 있어도 이걸 적용하라는 뜻.

 

- 사용 자제하는것이 좋음.

* {
	color: red !important;
}

 

 

 

 

 

---

ref lecture.

 

• https://edu.goorm.io/learn/lecture/20583