div p、div>p、div+p、div~p、div.a 、p,span的用法和区别

最新推荐文章于 2023-09-08 10:08:22 发布

Mo*◑

最新推荐文章于 2023-09-08 10:08:22 发布

阅读量506

点赞数 1

分类专栏： # Web开发基础文章标签： css html

原文链接：https://blog.csdn.net/Guoyu1_/article/details/86591290?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

版权

Web开发基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

代码部分：

part1：

div p ：将所有<div>标签里面的<p>标签选中（子标签和孙子辈标签）

<html>
	<head>
		<style> 
			div span{color:red;}
		</style>
	</head>
	<body>
		<div>
			<p> 
				<span> Hello World! </span>
			</p>
			<span> Study Css </span>
		</div>
	</body>
</html>

上面的例子中所有的span都为红色

效果图：

在这里插入图片描述

part2：

div>p ：将所有<div>标签的子标签<p>选中，不包括孙子辈标签。

<html>
	<head>
		<style> 
			div>span{color:red;}
		</style>
	</head>
	<body>
		<div>
			<p> 
				<span> Hello World! </span>
			</p>
			<span> Study Css </span>
		</div>
	</body>
</html>

这个例子中只有Study Css是红色！

效果图：

在这里插入图片描述

part3：

div+p ：将所有离<div>相邻的<p>标签选中

<html>
	<head>
		<style> 
			div+p{color:blue;} /*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/
		</style>
	</head>
	<body>
		<div>hello</div>
		<p>world</p>
	</body>
</html>

这个例子中world字体是蓝色！

效果图：

在这里插入图片描述

part4：

div~p ：将<div>后面所有的<p>标签选中

<html>
	<head>
		<style> 
			div~p{color:orange;} 
		</style>
	</head>
	<body>
		<div>第一段</div>
		<p>p标签</p>
		<p>p标签</p>
	</body>
</html>

这个例子中所有p标签字体都是橙色！

效果图：

在这里插入图片描述

part5：

div.a ：将<div>下class="a"标签选中

<html>
	<head>
		<style> 
			div.a{color:green;} 
		</style>
	</head>
	<body>
		<div class="a">hello world</div>
	</body>
</html>

这个例子中hello world字体是绿色！

效果图：

在这里插入图片描述

part6：

p,span ：将p和span选中

<html>
	<head>
		<style> 
			p,span{color:green;} 
		</style>
	</head>
	<body>
		<p>驾驶、行驶</p>
		<span>记分查询</span>
	</body>
</html>

这个例子中p和span字体是绿色！

效果图：

在这里插入图片描述

Mo*◑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div p、div>p、div+p、div~p、div.a 、p,span的用法和区别

div p ：将所有<div>标签里面的<p>标签选中（子标签和孙子辈标签）<style> div span{color:red;}</style><div> <p> <span> Hello World! </span> </p> <span&gt...
复制链接

扫一扫