css如何选择同一级的兄弟元素

CSS中可以使用同一级的兄弟选择器来匹配同一级别中的兄弟元素，具体格式如下：

element1 ~ element2 {
  /* styles */
}

其中element1是已知的兄弟元素，~是兄弟选择器，element2是需要匹配的兄弟元素。

例如：

div ~ p {
  color: red;
}

表示div之后的所有p元素都将应用红色文本颜色。

同一级别的兄弟选择器并不与辈分有关，只需要处于同一级别即可。

例如：

ul.nav li ~ li {
  margin-left: 10px;
}

表示在ul元素下，class为nav的ul元素中，li元素之后所有的li元素，均添加左边缘10px的边距。

同时，同一级别的兄弟选择器也可以和其他选择器组合使用，例如：

div[class^="Box"] ~ p {
  font-size: 16px;
}

表示属性class以“Box”开头的div元素之后的所有p元素都将应用16px的字体大小。

注意，同一级别的兄弟选择器只能向后选择元素，不能逆序选择。也就是说，在element1之前的元素是无法应用此选择器的。

此外还要注意，兄弟选择器不能选择自己，即element1和element2不能指向同一个元素。

综上所述，同一级别的兄弟选择器可以方便地选择同一级别的兄弟元素，并能和其他选择器组合使用，让CSS样式表更加灵活、方便。