퀴즈: CSS 우선순위

규칙을 가장 낮은 우선순위부터 높은 우선순위까지 정리해 보세요.

• p
• .article
• #main-container

ID 선택자는 클래스 선택자보다 더 높은 우선순위 점수를 얻습니다. 그리고 클래스 선택자는 태그 선택자보다 더 높은 우선순위 점수를 얻습니다.

"#main-container"는 ID 선택자, ".article"은 클래스 선택자, "p"는 태그 선택자입니다.

그러므로 가장 낮은 순위부터 높은 순위로 정리하면 "p", ".article", "#main-container"입니다.

규칙을 가장 낮은 우선순위부터 높은 우선순위까지 정리해 보세요.

• h1
• .important
• h2.important
• #main-photo

힌트 #11 / 3

ID 선택자는 클래스 선택자보다 더 높은 우선순위 점수를 얻습니다. 그리고 클래스 선택자는 태그 선택자보다 더 높은 우선순위 점수를 얻습니다.

"#main-photo"는 ID 선택자이고 "h2.important"은 태그 선택자와 클래스 선택자를 포함합니다. ".important"는 클래스 선택자이고 "p"는 태그 선택자입니다.

그러므로 가장 낮은 순위부터 높은 순위로 정리하면 "h1", ".important", "h2.important", "#main-photo"입니다.

이 CSS에서 <h3>은 어떤 색깔이 될까요?

<style>
  h3  {
     color: red;
  }

  h3 {
    color: blue;
  }

  h2 { 
    color: green;
  }
</style>

정답을 한 개 고르세요:

정답을 한 개 고르세요:

• 빨간색
• 파란색
• 초록색
• 
  

어떤 규칙을 적용할 것인지를 결정할 때 먼저 CSS는 규칙의 우선순위 점수를 계산합니다. 그러나 h3 규칙 둘 다 동일한 점수를 갖습니다.

그러면 CSS는 마치막에 정의된 규칙을 선택합니다. 색깔을 빨간색으로 설정한 것 다음에 색깔을 파란색으로 설정한 것이 있으므로 이것이 선택될 것입니다.