CSS3 关系节点选择器

最新推荐文章于 2022-11-17 22:02:01 发布

Ye_xiaoMing

最新推荐文章于 2022-11-17 22:02:01 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/Leaf_xiaoMing/article/details/119545897

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 关系节点选择器 */
		/* >
		  选中元素必须是儿子节点，不能选中孙子等其他后代元素，可选择多个儿子
		*/
		.box > p {
			color: red;
		}
		/* +
		  后面第一个亲兄弟(同一个父节点)
		*/
		h3 + p {
			color: blue;
		}
		/* ~
		  后面所有的亲兄弟
		*/
		span ~ h2 {
			color: yellow;
		}
	</style>
</head>
<body>
	<div class="box">
		<p>我是p标签</p>
		<p>我是p标签</p>
	</div>
	<div class="box">
		<div>
			<p>我也是p标签</p>
		</div>
	</div>
	<hr>
	<div>
		<p>p标签</p>
		<p>p标签</p>
		<h3>h3标签</h3>
		<p>p标签</p>
		<p>p标签</p>
		<h3>h3标签</h3>
		<h3>h3标签</h3>
		<p>p标签</p>
		<p>p标签</p>
	</div>
	<hr>
	<div>
		<span>span标签</span>
		<span>span标签</span>
		<h2>h2标签</h2>
		<h2>h2标签</h2>
		<h2>h2标签</h2>
	</div>
</body>
</html>

运行效果：

Ye_xiaoMing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 关系节点选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 关系节点选择器 */ /* > 选中元素必须是儿子节点，不能选中孙子等其他后代元素，可选择多个儿子 */ .box > p { color: red;.
复制链接

扫一扫