使用CSS3层选择器

最新推荐文章于 2022-08-29 15:49:43 发布

wwwjiahuan

最新推荐文章于 2022-08-29 15:49:43 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/wwwjiahuan/article/details/73027302

版权

<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<title>使用CSS3层选择器</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			width: 300px;
			margin: 0 auto;
		}
		div{
			margin: 5px;
			padding: 5px;
			border: 1px solid #ccc;
		}
		div div{
			background: orange;
		}
		body > div{
			background: green;
		}
		.active + div{
			background: lime;
		}
		.active ~ div{
			background: red;
		}
	</style>
</head>
<body>
	<div class="active">1</div>
	<div>2</div>
	<div>3</div>
	<div>4
		<div>5</div>
		<div>6</div>
	</div>
	<div>7
		<div>8
			<div>9
				<div>10</div>
			</div>
		</div>
	</div>
</body>
</html>