Cascading이란?

계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 뜻한다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용하게 된다.

적용 순서

1. !important : 그 어떤 선언보다 우선시되는 CSS 속성. 특수한 상황이 아닌 경우 자주 사용하지는 말자!
2. 인라인 스타일 정의(h1 style="...") : 항상 외부 스타일시트의 모든 스타일을 덮어쓰기 때문에 가장 높은 명시도를 가짐.

   !important와 인라인 스타일의 경우 자주 사용하지 말자! 스타일 디버깅이 굉장히 헷갈려진다 😭

3. 명시도에 따라 결정
4. 상속
   
   

명시도

인라인 > id > class > 태그

a.order { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
  ...
}

a#info { /* 아이디 1, 클래스 0, 태그 1 = 명시도 1 0 1 */
  ...
}

<h1 style = 'background-color: red'></h1> 
/*인라인 셀렉터의 경우 가장 높다*/

상속

부모 태그에 적용된 CSS 규칙은 자손에게도 똑같이 상속된다(모든 속성이 상속되는 건 아니다).

<div style='background-color: red;'>
      부모
	<div style='color:#fff;'>자식</div>
</div>

참고

MDN-계단식 및 상속
MDN-명시도
CSS 우선순위 계산기