+ 选择器(相邻兄弟选择器)
- 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
- 格式：元素1+元素2
- 结果: 紧挨着元素1后面的元素2被选中
eg：
<style type="text/css">
h1 + p {
color:green;
}
</style>
<body>
<p>This is paragraph (p标签)</p>
<h1>this is heading （h1标签）</h1>
<p>This is paragraph (p标签)</p>
<p>This is paragraph (p标签)</p>
</body>
-
运行结果：
-
注意
当多个兄弟元素相同时，会循环查找。
eg：
<style type="text/css">
li + li {
color:green;
}
</style>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</div>
</body>
- 运行结果:
２. ~ 选择器
- 查找某一个指定元素的后面的所有兄弟结点。
- 格式：元素1~元素2
- 结果: 元素1后的元素2都会被选中
eg：
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
<body>
<p>This is paragraph (p标签)</p>
<h1>this is heading （h1标签）</h1>
<p>This is paragraph (p标签)</p>
<p>This is paragraph (p标签)</p>
</body>
- 运行结果：
