하위 선택자

section

section area

heading

문단A

문단B

문단C

문단D

"> 하위 선택자

하위 선택자

section

section area

heading

문단A

문단B

문단C

문단D

"> 하위 선택자

하위 선택자

section

section area

heading

문단A

문단B

문단C

문단D

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하위 선택자</title>
<style type="text/css">
#header h2{color:blue;}

#nav h3{color: brown;}

#section h2{color:red;}

#content p{color: olive;}
</style>
</head>
<body>
	<h1>하위 선택자</h1><br>
	<div id="header">
		<h2>header</h2>
		<div id="nav">
			<h3>navigation</h3>
		</div>
	</div><br>
	<div id="section">
		<h2>section</h2>
		<p>section area</p>
	</div><br>
	<h1>heading</h1>
	<div id="content">
		<p>문단A</p>
		<p>문단B</p>
		<div>
			<p>문단C</p>
		</div>
	</div>
	<p>문단D</p>
</body>
</html>