2.퀴즈

style.css


p {
  color: blue;
}
 
p {
  color: red;
}

index.html


<p>이 텍스트는 무슨 색일까?</p>

같은 선택자, 같은 우선순위일 때 Cascading 규칙을 묻는 문제

blue

red

브라우저 기본 색상

예측할 수 없다

style.css


p {
  color: blue;
}
 
.text {
  color: green;
}

index.html


<p class="text">이 텍스트는 무슨 색일까?</p>

선택자 우선순위(Specificity)에 대한 이해를 묻는 문제

blue

green

red

inline 스타일이 아니므로 적용되지 않는다

style.css


p {
  color: blue;
}

index.html


<p style="color: orange;">이 텍스트는 무슨 색일까?</p>

CSS 우선순위에서 inline style의 위치를 묻는 문제

외부 CSS 파일의 p 선택자

클래스 선택자(.text)

inline style

선언 순서

style.css


p {
  color: blue !important;
}
 
.text {
  color: green;
}

index.html


<p class="text">이 텍스트는 무슨 색일까?</p>

!important가 Cascading 규칙에 미치는 영향을 묻는 문제

green

blue

orange

브라우저마다 다르다