CSS - 선택자 우선순위

---

CSS 선택자 우선순위 

 * 계단식(Cascade) 및 우선순위(Specificity) 

- 충돌 시 어떤 CSS가 우선하는지에 대한 규칙이다. 

1. 후자 우선의 원칙 
2. 구체성(명시도)의 원칙
3. 중요성의 원칙 

 

 

 * 후자 우선의 원칙 

- 동일한 선택자에 동일한 속성이 사용되었을 경우, 뒤에 적힌 속성을 따른다. 

p {color: aquamarine; font-size:20px;}
p {color: hotpink;}

적용 결과

 

 

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

- 어떤 선택자가 더 구체적으로 표기되어 있는가? 

- 가중치 순위 

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

 

- 우선순위 점수 계산 

유형	점수
inline-style	1,000점
id 선택자 #	100점
class . , 가상 클래스, 속성 선택자	10점
type, 가상 요소 선택자	1점
전체 선택자 *	0점

※ 아무리 구체적으로 작성하였다 하더라도, 가중치의 점수가 가중치 순위를 뒤집을 순 없다! 

ex) 클래스 선택자 > 유형 선택자 가중치 법칙을 이길 수는 없다!

✏ 명시도 계산기 사이트 (https://specificity.keegan.st/)

✏ 명시도 개념 이해에 도움이 되는 귀여운 사이트 (https://specifishity.com/)

 

 

 

 * 중요성의 원칙 

 !important 

- 이 선언은 다른 CSS의 어떤 선언보다도 우선한다. 

- 선택자 우선순위에 직접적인 영향을 미친다. 

✏ 사용을 권장하지 않는다. CSS의 자연스러운 상속을 깨트리고 오류/버그 발생 시 수정을 어렵게 만든다. 가중치 개념을 이해하여 자연스러운 우선순위를 따르도록 하자! 

 

 

---

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!