<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* 为span后的一个p元素设置一个背景颜色为黄色
* 后一个兄弟选择器:
* 作用:可以选中一个元素后,紧挨着的指定的兄弟元素
* 语法: 前一个 + 后一个
*
* 如下例中,表示选中span标签后紧挨着的p标签,
* 但是因为在p和span标签之间插入了一个div标签,
* 所以该p标签并未与span标签紧挨着,所以就不会被选中
* */
span + p{
background-color: yellow;
}
/*
* 选中后边的所有兄弟元素
* 语法: 前一个 ~ 后边所有
*
* 如下例中表示选中span标签后的所有p标签
* */
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是第一个p标签</p>
<span>你好</span>
<div>我是插在span与p之间的</div>
<p>我是第一个p标签</p>
<p>我是第一个p标签</p>
</body>
</html>