css联动选择器

最新推荐文章于 2024-04-22 17:35:13 发布

前端-文龙刚

最新推荐文章于 2024-04-22 17:35:13 发布

阅读量178

点赞数

分类专栏： html+css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/128373305

版权

html+css 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>css联动选择器</title>
	<style type="text/css">
		.box{margin-bottom:30px;}
		.box1,.box2,.box3{padding:10px;border:1px solid;}/*对多个class设置*/
		.box1 > p{background:red;}/*box1元素下素有p标签*/
		.box1,.box4 em{color:blue;}/*对多个*/
		/*.box3,.box2 < i{color:red;}*/
	</style>
</head>
<body>
	<div class="box box1">
		<p>我是P标签</p>
		<p>我是P标签</p>
		<em>我是box1下的em标签</em>
	</div>
	
	<div class="box box2">
		<i>我是box2下的i标签</i>
		<em>我是box2下的em</em>
	</div>
	
	<div class="box box3">
		<p>我是box3下的p标签</p>
		<i>我是box3下的i标签</i>
	</div>
	
	<div class="box box4">
		<p>我是box4下的p标签</p>
		<em>我是box4下的em标签</em>
	</div>
	
	<div class="box box5">
		<p>我是box5下的p标签</p>
	</div>
</body>
</html>