구체성

• 구체성의 값이 클수록 우선으로 적용이 됩니다.
• 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다.

구체성은 아래의 규칙대로 계산됩니다.

0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
전체 선택자는 0, 0, 0, 0을 가진다.
조합자는 구체성에 영향을 주지 않는다. (>, + 등)

상속

• 자식은 부모의 속성을 상속받습니다.
• 하지만 margin, padding, background, border 등 박스 모델 속성들은 상속되지 않습니다.
• 상속된 속성은 아무런 구체성을 가지지 못합니다. 예를들어 전체 선택자가 있다면 구체성은 0,0,0,0으로 가장 낮지만 상속은 구체성이 없기 때문에 전체 선택자의 속성이 적용됩니다.

cascading

cascading에는 다음과 같이 3가지 규칙이 있습니다.

• 중요도(!important)와 CSS 출처
• 구체성
• 선언 순서

CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분합니다.

출처
제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미합니다. (대부분이 여기에 해당합니다.)
그리고 사용자의 경우는 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미합니다.
마지막으로 사용자 에이전트의 경우는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미합니다.

모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.

스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.

• 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
• 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.

스타일 규칙들을 출처에 따라 분류합니다.

• 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.

스타일 규칙들을 구체성에 따라 분류합니다.

• 구체성이 높은 규칙들이 우선합니다.

스타일 규칙들을 선언 순서에 따라 분류합니다.

• 뒤에 선언된 규칙일수록 우선합니다.