캐스캐이딩
- 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 함.
- 중요도
<head>의<style><head>의<style>내의 @import<link>로 연결된 CSS 파일<link>로 연결된 CSS 파일 내의 @import- 브라우저의 기본 CSS
- 명시도
- !important
- inline 스타일
- 아이디 selector
- 클래스 / 가상 선택자
- 태그 선택자
- 상속된 스타일
- Specificity Calculator
<style>
div p {
color: red;
}
p {
color:blue;
}
</style>
<div>
<p>Hello</p>
</div>-
코드 순서에 따르면 p가 나중에 적용되었으므로 파란색이 되어야 할 것임
-
그러나 결과는 빨간색
-
1번의 경우
<div> , <p>두 요소에 대하여 스타일이 적용되어야 하므로 2점 -
2번의 경우에는
<p>요소에 대해서만 스타일이 적용되므로 1점입니다.
jo_garden