相邻兄弟选择器和通用兄弟选择器

兄弟选择器

1.相邻兄弟选择器（css2）

作用

给指定选择器后边***紧跟***的那个选择器选中的标签设置属性。（同级的标签，不能是包含关系，那样紧跟就成了父子）

格式

选择器1+选择器2 {
属性:值;
}

h1+p {
    
    
    color: skyblue;
    text-align: center;
}

<h1>相邻兄弟选择器</h1>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
<h1>相邻兄弟选择器</h1>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>

效果如下：

注意点

1.相邻兄弟选择器通过+相连。

2.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选择隔开的标签。（老大只能选老二，不能直接选老三）。

3，不包括指定的选择器

2.通用兄弟选择器（css3）

作用

给指定选择器后边的所有选择器选中的所有标签设置属性。

格式

选择器1`选择器2 {
属性：值;
}

h1~p {
    
    
    color: aquamarine;
     text-align: center;
}

<h1>相邻兄弟选择器</h1>
<a href="#">我是兄弟选择器</a>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
<h1>相邻兄弟选择器</h1>
<p>相邻兄弟选择器</p>

效果如下：

注意点

1.选择器之间用_(波浪线)连接，

2.通用兄弟选择器选中的是所有由选择器1指定的兄弟标签（不能被包含，那是父子，不能乱了关系），可以隔开。（老大选老三，老七都可以的，但是千万别父亲选老三。）