css中怎么选择兄弟元素

CSS有许多种方式来选择元素，其中一种是选择兄弟元素。在CSS中，我们可以使用兄弟选择器"~"来选择后面所有兄弟元素，还可以使用相邻兄弟选择器"+"来选择下一个兄弟元素。

首先来看兄弟选择器"~"的使用方式：

.element ~ .sibling-element {
  /* CSS样式 */
} 

该选择器表示选择element元素后所有的兄弟元素.sibling-element。注意，兄弟元素是指在同一级别的元素，而且他们的顺序并不重要。例如，假如我们有以下HTML结构：

<ul>
  <li>第一项</li>
  <li class="selected">第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li class="selected">第五项</li>
</ul> 

那么我们设置选择器：

.selected ~ li {
  color: red;
} 

则会选择到第三项和第四项，并将他们的颜色设置为红色。

接下来是相邻兄弟选择器"+"的使用方式：

.element + .sibling-element {
  /* CSS样式 */
} 

该选择器表示选择element元素后的下一个兄弟元素.sibling-element。例子同上，只需将兄弟选择器改为相邻兄弟选择器：

.selected + li {
  color: red;
} 

这里只会选择到第三项，并将其颜色设置为红色。因为第四项并不是第二项后面的下一个兄弟元素。

以上就是CSS中选择兄弟元素的两种方式。使用灵活，可以帮助我们更好地渲染页面。