Inheritance

CSS에서 상속은 요소에 속성 값이 따로 지정되어 있지 않은 경우 발생합니다. 이때 속성 값은 기본적으로 부모 요소의 Computed Value로 설정되며 상속되지 않는 속성의 경우는 기본적으로 속성의 초기 값 으로 설정됩니다.

* {
	color: inherit;
}

ul {
	color: #373e6a;
	font-size: 20px;
}

MDN 상속(Inheritance)

Cascade

CSS Cascade(계단식)는 스타일시트의 핵심 개념 중 하나로, 여러 스타일 규칙이 하나의 요소에 적용될 때 어떤 스타일이 우선적으로 적용될지를 결정하는 알고리즘으로 다음 기준을 순서대로 적용합니다.

• 관련성 (Relevance): 브라우저는 문서에 관련된 규칙만 고려합니다.
• 출처와 중요도: 참고: !important가 있는 선언은 일반 선언보다 항상 우선합니다.
  1. 사용자 에이전트 (browser) 기본 스타일시트의 일반 선언
  2. 사용자 (user) 일반 선언
  3. 작성자 (author) 일반 선언
  4. CSS Animation (@keyframes)
  5. 작성자 (author) !important 선언
  6. 사용자 (user) !important 선언
  7. 사용자 에이전트 (browser) !important 선언
  8. CSS Transitions
• 명시도 (Specificity):
  • 인라인 스타일: 1,0,0,0
  • ID 선택자: 0,1,0,0
  • 클래스/속성/가상 클래스: 0,0,1,0
  • 요소/가상 요소: 0,0,0,1
• 선언 순서: 마지막 선언이 우선합니다.
• 기본값: 명시적인 값이 없으면 기본값으로 대체됩니다.

MDN 겹침(Cascade)

Specificity

CSS에서는 하나의 요소에 여러 스타일이 Cascade된 경우, Specificity가 높은 선택자의 스타일이 적용됩니다. 명시도(Specificity)는 선택자의 우선 순위를 결정하는 방법으로, 다음과 같은 규칙에 의해 결정됩니다.

• "A"는 아이디 선택자의 명시성 값으로, 선택자의 구성에 id가 사용된 횟수입니다.
• "B"는 클래스 선택자의 명시성 값으로, 선택자에 class가 사용된 횟수입니다.
• "C"는 요소 선택자와 가상 요소의 명시성 값으로 선택자 구성에 요소와 가상 요소가 사용된 횟수입니다.
• 전체 선택자(universal selector)는 명시성 값을 가지지 않습니다.