兄弟元素选择器
- 语法1：前一个元素 + 后一个元素
作用：选中一个元素后紧挨着的指定的兄弟元素。 - 语法2：前一个元素 ~ 后边一类元素
作用：选中后边的所有兄弟元素
举例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 为span后的p标签设置背景颜色 */
span + p {
background-color: orange;
}
</style>
</head>
<body>
<p>我是一个段落</p>
<span>我是span标签</span>
<p>我是一个段落</p>
<p>我是一个段落</p>
</body>
</html>结果：
为紧挨着span的p设置了背景颜色。
举例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 为span后的p标签设置背景颜色 */
span + p {
background-color: orange;
}
</style>
</head>
<body>
<p>我是一个段落</p>
<span>我是span标签</span>
<div>我是div</div>
<p>我是一个段落</p>
<p>我是一个段落</p>
</body>
</html>结果：样式未起作用。
注意前一个元素和后一个元素必须紧挨着。否则会不起作用。
举例3：
使用~，为span后的所有p标签设置背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 为span后的所有p标签设置背景颜色 */
span ~ p {
background-color: orange;
}
</style>
</head>
<body>
<p>我是一个段落</p>
<span>我是span标签</span>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>
<p>我是div中的段落</p>
</div>
<p>我是一个段落</p>
</body>
</html>结果：可以实现span后的所有p兄弟元素设置样式，即使span后的p不连续。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。