css 우선순위 !important

3. 선택자(Selector) 우선순위

스타일 시트는 다음과 같은 3개의 CSS원천 소스(Original Source)를 가질 수 있습니다.

• 제작자(author) 원천 소스 : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일
• 사용자(user) 원천 소스 : 사용자가 직접 정하는 자신이 사용할 스타일
• 사용자 도구(user agent) 원천 소스 : 웹 브라우저 자체에 지정된 기본 스타일

스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용하게 되면 스타일이 충돌할 수 있습니다. 그렇기 때문에 각 원천 소스간은 물론, 선택자 간의 우선순위를 알아야 합니다. 다음의 우선순위 규칙을 통해 원하는 스타일을 정확히 적용할 수 있습니다.

 

1) 원천 소스 우선 순위

!important 선언을 한 사용자 스타일  > !important 선언을 한 제작자 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 도구 선언 (브라우저 자체의 선언)

 

2) CSS 명시도(Specificity) 계산법 

 !important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

!important선언을 사용한 형식이 가장 우선 순위가 높습니다. 그래서 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 합니다.

이를 제외한 나머지 선택자는 대괄호 “[]”안에 있는 숫자를 각각의 점수로 부여하여 우선순위를 계산합니다.

• ID 선택자의 갯수를 세어서 개당 100 으로 계산합니다. (= a)
• 클래스 선택자의 갯수를 세어서 개당 10 으로 계산합니다. (= b)
• 태그 선택자의 갯수를 세어서 개당 1 로 계산합니다. (= c)
• 공용 선택자는 모두 0으로 계산합니다. (= d)
• 가상 엘리먼트는 무시합니다.

→ a + b + c + d의 값이 높은 순서대로 스타일을 적용하는 우선순위를 가지게 됩니다. 다음의 예를 봅시다.

http://www.nextree.co.kr/p8468/