013_CSS兄弟选择器

最新推荐文章于 2023-10-14 20:18:49 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-10-14 20:18:49 发布

阅读量124

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109308528

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1.1. element1~element2选择器element1之后出现的所有element2。

1.2. 两种元素必须拥有相同的父元素, 但是element2不必直接紧随element1。

2. 例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS兄弟选择器</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p~ul {
				background: #ff0000;
			}
		</style>
	</head>
	<body>
		<div>一个 div 元素。</div>
		<ul>
		  	<li>咖啡</li>
		  	<li>牛奶</li>
		  	<li>茶</li>
		</ul>

		<p>第一段。</p>
		<ul>
		  	<li>咖啡</li>
		  	<li>牛奶</li>
		  	<li>茶</li>
		</ul>

		<h2>另一个列表</h2>
		<ul>
		  	<li>咖啡</li>
		  	<li>牛奶</li>
		  	<li>茶</li>
		</ul>
	</body>
</html>

2.2. 效果图