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

相關標籤/搜索