CSS | 8. 구체성과 상속

웹 개발/웹프로그래밍

KISCH 2020. 12. 24. 21:41

같은 요소를 서로 다른 선택자로 선택할 수 있고 서로 다른 규칙을 갖고 있다면 어떤 규칙이 우선 적용되어야 하는지 정해진 규칙을 '구체성'이라고 한다.

선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것
0,0,0,0
0,1,0,0 : 선택자에 있는 모든 id 속성값
0,0,1,0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0,0,0,1 : 선택자에 있는 모든 요소, 가상 요소

important 키워드는 모든 구체성을 무시하고 우선권을 갖습니다.
선언 : 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.

1
p#page {color: red !important;}
cs

상속은 자손요소에까지 영향을 미치는 것을 말합니다. 하지만 자손이 부모의 모든 속성을 다 상속하지는 않습니다. margin, padding, background, border 등의 박스 모델 속성들은 상속되지 않습니다.

캐스케이딩은 폭포의 모양처럼 단계적이라는 의미로, 구체성이 같은 규칙이 동일한 요소에 적용 될 경우 cascading 규칙에 의해 적용됩니다.

중요도와 출처 : 제작자 CSS, 사용자 CSS, 브라우저 CSS
구체성
선언 순서

관련포스트

저작자표시