티스토리 뷰
- 선택자에 의한 캐스케이딩: style > id > class > type 순으로 우선순위가 높음
- 나중에 작성한 코드가 우선순위를 갖는다.
지시사항
- <body> 태그 안에 다음을 입력합니다.
<p>순서 캐스케이딩</p>
<header>
<h3>디테일 캐스케이딩</h3>
</header>
<h4 style="color:green;" id="color" class="color">선택자 캐스케이딩</h4>
2. <style> 태그 안에서 여러 선택자들의 속성을 변경해보며, 캐스케이딩에 대해 알아봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 우선 순위</title>
<style>
p {color:red;}
p {color:blue;}
header h3 {background-color: green;}
h3 {background-color:red;}
#color {color:blue;}
.color {color:yellow;}
h4 {color:red;}
</style>
</head>
<body>
<p>순서 캐스케이딩</p>
<header>
<h3>디테일 캐스케이딩</h3>
</header>
<h4 style="color:green;" id="color" class="color">선택자 캐스케이딩</h4>
</body>
</html>