[비전공자를 위한 HTML/CSS] (18) 구체성(명시도)

구체성 : 선택자에게 어떤 규칙이 우선순위로 적용되어야 할지를 구체적으로 수치화 한것.

 

구체성은 4개의 값(0, 0, 0, 0)으로 이루어져 있다. 좌측의 값이 높을 수록 높은 구체성을 갖는다.

• 1, 0, 0, 0 : 인라인 스타일
• 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, 1, 0, 0 */
p.bright em.dark {...}	/* 0, 0, 2, 2 */
#page {...}	/* 0, 1, 0, 0 */
div#page {...}	/* 0, 1, 0, 1 */

선택자의 구체성값을 잘 알아야 많은 스타일 규칙들 정의 할 때 의도치 않은 일 발생X.

 

 

인라인 스타일

<style>
	p#page {color: red;}	/* 0, 1, 0, 1 */
</style>

<p id="page" style="color: blue;">abcdefg</p>	/* 1, 0, 0, 0*/

인라인 스타일

 

important

: 별도의 구체성은 없으나, 모든 구체성을 무시하고 우선권을 갖는다.

<style>
	p#page { color: red !important; }
</style>

<p id="page" style="color: blue">abcdefg</p>

important