스타일시트는 제작자(author), 사용자(user), 사용자도구(user agent) 세개의 다른 CSS 원천 소스를 가질 수 있습니다.
제작자는 규약에 따라 스타일시트를 명시합니다. 예를들어 HTML에서 스타일시트는 문서 내부에 포함될 수도 있고, 외부로 연결 될 수도 있습니다.
사용자는 스타일시트 정보를 특정 문서를 위해 명시할 수 있습니다. 예를들어 사용자는 스타일시트를 포함하는 파일을 지정할 수 있거나 사용도구가 사용자 스타일시트를 생성하는 인터페이스를 제공할 수도 있습니다.
규약에 부합하는 사용자 도구는 문서의 모든 다른 스타일시트에 우선해서 디폴트 스타일시트를 적용해야 합니다. 사용자 도구의 디폴트 스타일시트에서는 문서의 엘리먼트들이 일반적인 표현을 위해 기대되는 지정방식으로 기술되어야 합니다. 이를테면 html의 em엘리먼트는 이태릭 글꼴을 사용하여 표현되어야 합니다. 하지만 이러한 시스템 설정들은 사용자에 의해 변경될 수 있습니다.
CSS 적용방법에서도 나왔듯이 스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용할 수도 있기 때문에 엘리먼트에 적용되는 스타일이 충돌할 수도 있습니다. 따라서 스타일 적용의 우선순위 규칙을 알아둘 필요가 있습니다.
- 원천 소스중 사용자 스타일시트가 가장 우선한다.
- 선택자 우선순위를 계산하여 값이 높은 순서대로 적용한다.
- 가장 마지막에 지정된 스타일을 우선적으로 적용한다.
1. 사용자 스타일시트 우선
작성자측의 스타일시트보다 사용자 측의 스타일시트를 우선적으로 적용합니다.
속성에 "!important"를 선언한 경우 스타일의 우선순위는 다음과 같습니다.
!important 선언을 한 사용자 스타일 > !important 선언을 한 작성자 스타일 >
작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언)
2. 선택자 우선순위 계산 (specificity 계산)
더 특정적인 선택자가 더 일반적인 선택자보다 우선합니다. 가상 엘리먼트와 가장클래스들은 각각 일반적인 엘리먼트와 클래스와 같이 간주됩니다.
- a = 선택자중 ID의 수를 세어 100자리에 놓는다,
- b = 선택자중 가상 클래스와 클래스의 수를 세어 10자리에 놓는다.
- c = 선택자중 엘리먼트의 수를 세어 1의 자리에 놓는다.
- d = 가상 엘리먼트는 무시한다.
| a (100자리) | b (10자리) | c (1자리) | 선택자 우선순위 계산 | |
|---|---|---|---|---|
| *{} | 0 | 0 | 0 | 0 |
| li{} | 0 | 0 | 1 | 1 |
| ul li{} | 0 | 0 | 2 | 2 |
| ul ol+li{} | 0 | 0 | 3 | 3 |
| li.num{} | 0 | 1 | 1 | 11 |
| ul+ol li.num{} | 0 | 1 | 3 | 13 |
| li.num.last{} | 0 | 2 | 1 | 21 |
| #wrap{} | 1 | 0 | 0 | 100 |
| p#wrap{} | 1 | 0 | 1 | 101 |
예를들어 다음과 같은 경우를 살펴보면
<style type="text/css">
p { color: gray;}
p.wrap { color: black;}
p#wrap { color: red;}
</style>
<p class="wrap" id="wrap">CSS Dictionary </p>
이 경우 위 세가지 스타일중 선택자 우선순위가 가장 높은 p#wrap 가 적용됩니다.
(p=1 , p.wrap=11 , p#wrap=101)
다음과 같은 경우는 어떨까요?
<style type="text/css">
#wrap { color:black;}
</style>
<p id="wrap" style="color:red;"> CSS Dictionary </p>
이 경우에는 #wrap와 style속성이 100으로 같은 선택자 우선순위에 놓이게 됩니다. 이럴때는 가장 마지막에 지정된 스타일이 적용되므로 텍스트가 빨간색으로 출력됩니다.
3. 가장 마지막에 지정된 스타일 우선 적용
만약 충돌하는 두 스타일들이 같은 원천 소스를 가지거나 선택자 우선순위가 같다면 가장 마지막에 지정된 스타일이 우선 적용됩니다.
예를 들어 다음과 같은 경우라면...
<head>
<style type "text/css">
p.test {
color: black;
}
</style>
</head>
<body>
<p class="test" style="color: red;"> 경고문 </p>
</body>
이 경우 "경고문"이라는 텍스트는 가장 마지막에 지정된 스타일이 적용되어 빨간색으로 출력됩니다.
다음의 경우도 마찬가지로 빨간색의 "알림"이라는 텍스트가 출력됩니다.
<head>
<style type "text/css">
.wrap {
color: black;
}
.notice{
color: red;
}
</style>
</head>
<body>
<p class="wrap notice"> 알림</p>
</body>
