Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags
more
Archives
Today
Total
관리 메뉴

개발 걸음마 중

CSS - 선택자 우선순위 본문

dev/HTML + CSS

CSS - 선택자 우선순위

꼿모 2023. 3. 5. 20:01


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의 자연스러운 상속을 깨트리고 오류/버그 발생 시 수정을 어렵게 만든다. 가중치 개념을 이해하여 자연스러운 우선순위를 따르도록 하자! 

 

 


 

 

 

 

 

 

 

 

 

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

'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