웹 기술 기초
<style>
#main p { color: red; }
.content p { color: green; }
p.note { color: blue; }
</style>
<div id="main" class="content">
<p class="note">Hello</p>
</div>다른 스타일 지정은 없는 것으로 한다. 위의 HTML에서 'Hello'라는 문자의 색은?
- A빨강(red)
- B초록(green)
- C파랑(blue)
정답과 해설 보기
정답: A. 빨강(red)
여러 규칙이 같은 요소에 해당할 때는 선택자의 명시도가 높은 규칙이 우선됩니다. 명시도는 (ID의 수, 클래스·속성·의사 클래스의 수, 요소의 수)의 조로 비교하며, #main p는 (1, 0, 1), .content p와 p.note는 둘 다 (0, 1, 1)이므로 ID를 포함하는 #main p의 빨강이 사용됩니다. 명시도가 같은 규칙끼리는 나중에 쓴 규칙이 우선됩니다. style 속성에 직접 쓴 지정이나 !important는 이보다 우선됩니다.