css之'>'

时间 2019-11-13

标签 css 栏目 CSS 繁體版

原文原文链接

1. 百度中搜索结果：html

　　这些是CSS3特有的选择器，E > F 表示选择E元素的全部子F元素，与E F的区别在于，E F选择全部后代元素，>只选择一代。spa

2. 例子：htm

<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. 运行结果blog

A B C

D E F

A B C

D E F