理解CSS的区块

下面一段Html & Css代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="style/basic.css" />
<title>理解区块</title>
<style type="text/css">
#condition{
	background:orange;
	border:1px solid black;
	padding:20px;
}
.box{
	border:1px solid black;
	margin:10px;/*外边距,上下左右空10px*/
	padding:10px/*内边距,上下左右空10px*/
}
#condition p{
color:blue;
}
.box p{
color:red;
}
</style>
</head>
<body>
	<div id="condition">
		<p>理解区块的测试</p>
		<div class="box">
		<p>子div1</p>
		</div>
		<div class="box">
		<p>子div2</p>
		</div>
	</div>
</body>
</html>

 

思考为什么子div2的颜色没有变成红色?


理解CSS的区块_第1张图片
 

你可能感兴趣的:(css)