CSS后代选择器

代码如下:

<html>
<head>
	<style type="text/css">
		p {text-align: center;}
		.important {color: red;}
		p.important {background:silver;}  /* 完全等同于:p[class="important"]  {background:silver;} */
		.important div {background: purple;}  /* 注意:这是后代选择器。有关后代选择器有一个易被忽视的方面,即两个元素之间的  层次间隔  可以是  无限  的 */
	</style>
</head>

<body>
	
	<p>1. Just a paragraph</p>
	
	<div class="important">2. div with class</div><!-- 应用: .important {color: red;} -->
	
	<!-- 注意: 应用三个:p {text-align: center;};.important {color: red};p.important {background:silver;}  -->
	<p class="important">3. paragraph with class</p>
	
	<p>4. Paragraph and div<!-- 应用: p {text-align: center;} -->
		<!-- 注意:不会应用:p.important {background:silver;} -->
		<div class="important">4. 1 div with class</div><!-- 应用:.important {color: red;} -->
	</p>
	
	<!-- 注意:对后代选择器,两个元素间层次间隔是无限的 -->
	<div class="important">5. div with class<!-- 应用:.important {color: red;} -->
		
		<div style="background: green">5. 1I have green background<!-- 应用: .important {color: red},然后被就近的给覆盖掉  -->
			
			<div style="background: yellow">5. 2 I have yellow background<!-- 应用: .important {color: red},然后被就近的给覆盖掉  -->
				<div>5. 3 I have nothing, but I'll have .important div {background: purple;} </div><!-- 应用: .important div {background: purple;};而且会是红色,因为最上的div应用了 .important {color: red;}  -->
			</div>
			
		</div>
		
	</div>
	
</body>

</html>


运行结果如下:

CSS后代选择器_第1张图片

你可能感兴趣的:(css,Class,div)