<!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>
运行效果: