本文最后修改于 2383 天前，部分内容可能已经过时！

最近在复习前端的内容，感觉忘得七七八八了，所以只好把一些复习内容也给备份一下，也希望能够帮助到有需要的小伙伴们。
然后就遇到个CSS相邻兄弟选择器，感觉以前也不是特别深刻理解，所以导致一看到这选择器，就这是啥，我是怎么学的前端，这说的啥。
根据w3school的解释呢，

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}

例子：

h1 + p {font-weight:700;}

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

这里的效果就是，这里有一个<h1>标签和很多个<p>标签，而我只想要在第一个段落加粗，则可以使用兄弟选择器，因为兄弟选择器选择的是+号后面的元素,你也可以直接选择给第一个段落标签添加一个class选择器或ID选择器，或者在这里面添加一个p:frist-child也可以实现同样效果。

另外戏剧性的是，如果是<li>+<li>(相同的两个标签)那么会从第二个li开始，循环式的给后面的兄弟元素增加属性值。

如这样子：
li + li {font-weight:700;}

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

如果对你有所帮助，欢迎投食打赏博主，支持云闪付微信支付宝QQ~ 感谢您的支持，耶