您的位置：首页 > Web前端 > CSS

CSS后代选择器

2011-10-22 18:14 429 查看

代码如下：

<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>

运行结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航