개발 걸음마 중
CSS - 선택자 우선순위 본문
CSS 선택자 우선순위
* 계단식(Cascade) 및 우선순위(Specificity)
- 충돌 시 어떤 CSS가 우선하는지에 대한 규칙이다.
- 후자 우선의 원칙
- 구체성(명시도)의 원칙
- 중요성의 원칙
* 후자 우선의 원칙
- 동일한 선택자에 동일한 속성이 사용되었을 경우, 뒤에 적힌 속성을 따른다.
p {color: aquamarine; font-size:20px;}
p {color: hotpink;}
* 구체성의 원칙 (Specificity:명시도)
- 어떤 선택자가 더 구체적으로 표기되어 있는가?
- 가중치 순위
- inline 스타일 속성
- id #
- class . , 가상클래스, 속성선택자
- type(tag), 가상요소 선택자
- 우선순위 점수 계산
유형 | 점수 |
inline-style | 1,000점 |
id 선택자 # | 100점 |
class . , 가상 클래스, 속성 선택자 | 10점 |
type, 가상 요소 선택자 | 1점 |
전체 선택자 * | 0점 |
※ 아무리 구체적으로 작성하였다 하더라도, 가중치의 점수가 가중치 순위를 뒤집을 순 없다!
ex) 클래스 선택자 > 유형 선택자 가중치 법칙을 이길 수는 없다!
✏ 명시도 계산기 사이트 (https://specificity.keegan.st/)
✏ 명시도 개념 이해에 도움이 되는 귀여운 사이트 (https://specifishity.com/)
* 중요성의 원칙
!important
- 이 선언은 다른 CSS의 어떤 선언보다도 우선한다.
- 선택자 우선순위에 직접적인 영향을 미친다.
✏ 사용을 권장하지 않는다. CSS의 자연스러운 상속을 깨트리고 오류/버그 발생 시 수정을 어렵게 만든다. 가중치 개념을 이해하여 자연스러운 우선순위를 따르도록 하자!
잘못된 정보에 대한 피드백은 언제든지 환영입니다!
'dev > HTML + CSS' 카테고리의 다른 글
CSS - Box Model (0) | 2023.03.05 |
---|---|
HTML - 블록 레벨 요소 vs 인라인 레벨 요소 (0) | 2023.03.05 |
CSS - 가상 선택자 (1) | 2023.03.05 |
HTML - 목록 관련 태그 (ul, ol, dl) (0) | 2023.03.05 |
HTML / CSS - 텍스트 꾸미기 (0) | 2023.03.05 |
Comments