CSS 구체성

// 구체성

 

- 선택자에 어떤 규칙이 우선으로 적용되어야 하는지에 대한 규칙

- 선택자를 얼마나 명시적으로 선언했는지를 수치화 한 것으로 구체성이 높을수록 우선시된다.

- 0, 0, 0, 0 > 4개의 숫자 값으로 이루어진다.

- 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 가진다.

~ 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값

~ 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스

~ 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

- 전체 선택자는 0, 0, 0, 0을 가진다. (영향을 주지 않는다.)

- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

~ 1, 0, 0, 0 : 인라인 스타일

<p id="page" style="color:blue">Lorem impusm dolor sit.</p> <!--1,0,0,0-->

~ !important: 구체성을 모두 무시하고 우선권을 가진다.

p#page { color: red !important; }

---

// 상속

-  margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다.

- 상속된 속성은 아무런 구체성을 가지지 못한다.(0, 0, 0, 0 도 아니다.)