CSS 구체성

CSS에는 구체성이라는게 존재한다.

많은곳에 무조건 스타일시트에 코딩되는 순서에따라 실행되는 우선순위가 정해진다고 나와있다.

물론 이도 틀린말은 아니지만 정확하다고도 할 수 없다.

왜냐하면, CSS에는 구체성이라는 것이 있는데, 이 구체성에 따라 우선순위가 정해지는 것이다.

자 그럼 살펴보자..

 

기본 0 0 0 0 으로 되어있다면 (여기서 각 숫자는 갯수를 의미)

첫번째는 inline

두번째는 id

세번째는 클래스(가상클래스 포함)

네번째는 요소(가상요소 포함)

예를 들어보자.

선택자가 span 일때는 구체성이 어떻게 나올까? - 0 0 0 1  (요소 1개)

#id>div - 0 1 0 1 (id 1개, 요소 1개) 

#id:hover - 0 1 1 0 (id 1개, 가상클래스 1개)

이런식으로 된다.

몇몇 책에는 '숫자의 합' 에 따라 구체성이 갈린다고 나와있는 경우가 있는데, 이는 틀린 말이다.

inline, id, class, 요소 순으로 높은 숫자가 있는 것이 구체성이 좋은 것이다.

예1)

h1{

    color:green; 

}

h1{

    color:red; /* 이 코드 적용 */

}

예2)

body h1{

    color:green; /* 이 코드 적용 */

}

h1{

    color:red;

}