HTML与CSS基础之兄弟元素选择器(九)

最新推荐文章于 2023-04-06 11:22:31 发布

xiayiye5

最新推荐文章于 2023-04-06 11:22:31 发布

阅读量777

点赞数

分类专栏： HTML和CSS基础文章标签： HTML CSS 基础兄弟元素

本文链接：https://blog.csdn.net/xiayiye5/article/details/61920434

版权

HTML和CSS基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文通过一个具体的HTML示例详细介绍了CSS中兄弟元素选择器的使用方法，包括紧邻兄弟选择器（+）与通用兄弟选择器（~）的区别及应用。通过不同选择器的应用，可以实现对指定元素后跟随的特定元素进行样式调整。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>兄弟元素选择器</title>
		<style type="text/css">
			span~p {
				background-color: #FF1493;
			} //+号,表示跟span紧挨着的第一个才改变颜色,~表示span后面的所有元素改变颜色
		</style>
	</head>

	<body>
		<p>我是第一个p</p>
		<p>我是第二个p</p>
		<p>我是第三个p</p>
		<span>我是第一个span</span>
		<p>我是第四个p</p>
		<p>我是第五个p</p>
		<p>我是第六个p</p>
	</body>

</html>