兄弟元素选择器
- 语法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不连续。
