더북(TheBook)

선택자의 종류에 따른 우선순위

선택자가 type, id, class 중 무엇이냐에 따라 우선순위가 달라집니다. 구체적인 예를 살펴보겠습니다.

예제 소스 Exercise/5장/2_cascade/index03.html

<body>
    <h3 class="color">Welcome to CSS</h3>
</body>

 

예제 소스 Exercise/5장/2_cascade/style03.css

.color {
    color: red;
}

h3 {
    color: green;
}

 

그림 5-9 실행 결과

 

여기서 .colorclass 선택자이고 h3type 선택자입니다. .colorh3가 가리키는 영역은 같습니다. 이러한 상황에서는 순서에 상관없이 class 선택자(.color)가 type 선택자(h3)보다 우선순위가 높습니다. 따라서 글자는 빨간색으로 출력됩니다.