[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #4. 가상 선택자 구체성, 상속

1. 구체성 : 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것으로 어떤 규칙을 우선적으로 적용시킬지를 결정하는 규칙이다. 구체성의 값이 클수록 우선적으로 적용이 되며(단 예외 있음! 인라인 우선, !important 우선), 구체성은 아래와 같이 4개의 값으로 이루어진다.

[구체성 보는 법 예시]
=> h1 { } -> 0,0,0,1
=> body h1 {} -> 0,0,0,2
=> .grape {} -> 0,0,1,0
=> p.bright em.dark {} -> 0,0,2,2
=> #page -> 0,1,0,0 ✔이 예시에서 두번째로 구체성이 높음
=> div#page -> 0,1,0,1 ✔이 예시에서 가장 구체성이 높음
[특징]
- 구체성이 높은 것이 우선적으로 적용됨
- 조합자(>, + 등)는 구체성을 따질 때 고려하지 않음
- 인라인 스타일은 가장 높은 구체성을 가짐(1,0,0,0) => 아래 예시에서는 두번째 명령어가 인라인 스타일(1,0,0,0)로 첫번째 명령어의 구체성(0,1,0,1)보다 높으므로, 두번째 명령어를 따라 'blue'로 색이 지정된다.

- !IMPORTANT : 모든 구체성을 무시하고 우선권을 가짐.
-> 아래 예시에서 !important를 사용한 위쪽 명령어가 우선시되어 이 경우 색깔은 RED로 지정된다.

2. 상속 : 어떤 스타일 규칙이 그 자손 요소에까지 적용되는 것 => 일반적으로 다 상속 적용.
- 상속이 되지 않는 속성(박스 모델 관련 속성) : margin, padding, background, border
3. 캐스케이딩(Cascading) : 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지 정한 규칙
->구체성이 동일할 경우, 캐스케이딩에 따라 동작함
⭐캐스케이드 규칙 : 중요도, 출처, 구체성, 선언순서
(1) 중요도 : !important로 선언된 규칙 우선
(2) 출처 : 사용자 !important > 제작자 !important > 제작자(사이트 제작자가 작성한 CSS) > 사용자(사이트 방문자의 CSS) > 사용자 에이전트(브라우저에 내장된 CSS) 순으로 우선
(3) 구체성 : 위에서 배운 내용
(4) 선언순서 : 나중에 선언된 것 우선