css之'>'

1. 百度中搜索结果:

  这些是CSS3特有的选择器,E > F 表示选择E元素的所有F元素,与E F的区别在于,E F选择所有后代元素,>只选择一代。

2. 例子:

<html>
<head>
	<style>
		.level1{
			background-color: #eeeeee;
		}
		.level1 > a {
		  position: relative;
		  display: block;
		  padding: 10px 15px;
		}
		.level3 {
			background-color: #dddddd;
		}
		.level3 a {
		  position: relative;
		  display: block;
		  padding: 10px 15px;
		}
	</style>
</head>
<body>
	<div class='level1'>
		<a>A</a>
		<a>B</a>
		<a>C</a>
		<div class='level2'>
			<a>D</a>
			<a>E</a>
			<a>F</a>
		</div>
	</div>
	<div class='level3'>
		<a>A</a>
		<a>B</a>
		<a>C</a>
		<div class='level4'>
			<a>D</a>
			<a>E</a>
			<a>F</a>
		</div>
	</div>
</body>
</html>

 3. 运行结果

 

A B C
D E F
A B C
D E F

 

posted @ 2019-06-02 17:09  ManchesterUnited  阅读(843)  评论(0编辑  收藏  举报