이 자료를 학습후 작성했습니다.
https://www.boostcourse.org/cs120/lecture/92905?isDesc=false

구체성

어떤 규칙이 우선으로 적용되어야 하는지에 대한 규칙이다.
얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,
구체성의 값이 클수록 우선 적용된다.

인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다.

하지만,

important 키워드는 모든 구체성을 무시하고 우선권을 갖는다.

상속

<em>은 부모인 <h1>의 color: gray를 상속받습니다.
그러나 박스 모델 속성들은 상속되지 않는다.

밑의 경우엔 어떻게 될까?

상속된 속성은 구체성을 갖지 못해서 CSS가 red로 표시된다.

전체선택자는 비록 구체성이 0,0,0,0으로 낮지만 상속된 속성보다는 높기 때문에 우선 적용됩니다.

cascading

cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며,
모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다.

h1 { color: red; }
h1 { color: blue; }

같은 구체성을 가진 두 규칙이 적용되면 어떻게 적용될까?
blue가 적용된다.

1. 중요도와 출처
2. 구체성
3. 선언 순서