[CSS] 구체성

style을 선언했지만 적용이 안되는 일이 있다.

분명 클래스명부터 속성과 속성값들을 제대로 기입했는데 적용이 안된다면

이유는 'css구체성'에 있다.

선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있다.

이 규칙을 '구체성'이라고 한다. 구체성의 값이 클수록 우선 적용이 된다.

0	0	0	0
직접 스타일	id 값	class 값, 기타 속성,가상클래스	모든 요소,가상 요소

 

위의 표가 생소하고 어렵게 느껴지겠지만 알고보면 간단하다.

구체성의 순서는 위의 표 기준으로 좌측에 있는 직접 스타일의 중요도가 제일 높다.

반대로 우측에 있는 모든 요소 혹은 가상 요소가 제일 낮다.

 

구체성은 아래의 규칙대로 계산이 된다.

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

 

important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다.

important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 쓴다.

p#page{color: red !important;}