CSS에서 상속은 일부 속성이 부모 요소에서 자식 요소로 전달되는 방식을 말한다.

✦ 상속과 관련된 속성들

1. initial

부모 요소의 스타일 속성을 상속받고 싶지 않을 때 사용한다. 이 값을 사용하여 속성을 초기화할 수 있다.

p {
    color: initial;
}

그러나 모든 속성을 초기화하고 싶지 않을 때는 하나하나 속성을 초기화 해야 하는 번거로움이 있다.
이를 해결하기 위해서는 all 속성을 사용하면 된다.

p {
	all: initial
}

---

2. inherit

initial과 반대로 무조건 부모의 속성을 상속받을 때 사용한다.

p {
	color: inherit
}

---

3. unset

자연스럽게 상속되는 경우라면 inherit를, 그렇지 않은 경우라면 initial을 적용한다.

p {
	color: unset
}

---

🤔 그렇다면, 여러 개의 상속이 겹치거나 부모 요소와 자식 요소가 겹치는 경우는 어떻게 판단하는 걸까?

✦ 상속과 우선순위

자식 요소에서 동일한 속성에 다른 값을 명시적으로 지정하면, 그 값이 상속된 값을 덮어쓴다.
이를 우선순위라고 하며, 이는 CSS에서 스타일이 적용되는 순서를 결정하는 중요한 원칙이다.

⭐️ 우선 순위가 결정되는 여러 요인

선언 위치

• 스타일 규칙이 어디에 선언되었는지에 따라 우선순위가 달라진다.
• 일반적인 스타일 규칙 적용 순서
  브라우저 기본 스타일
  → 외부 CSS 파일
  → 페이지 내부에 있는 <style> 태그
  → HTML 태그 내부의 style 속성
  ∴ style 속성이 가장 높은 우선 순위를 가진다.

명시도

• 선택자가 특정한 요소를 얼마나 구체적으로 지정하는지를 나타낸다.
• 적용범위가 적을수록 명시도가 높은 것.

코드 순서

• 같은 명시도를 가진 두 규칙이 있다해도, 나중에 선언된 규칙으로 적용된다.

---

🏆 우선 순위

1. important
2. inline style
3. id
4. class, attribute, pseudo class
5. Type(tag)
6. *
7. inherited