css同级的选择器

在 CSS 中，可以使用同级选择器来选择某个元素的同级兄弟元素。

.example + p {
  color: blue;
}

这个例子中的 + 符号就是同级选择器。它表示选择紧接在 .example 元素后出现的 p 元素，也就是 .example 元素的同级兄弟元素。

同级选择器可用于实现交互效果和样式控制。比如，当用户点击某一个元素后，需要对其同级元素进行变化，就可以使用同级选择器。

.item:hover ~ .item {
  opacity: 0.5;
}

这个例子中的 ~ 符号就是同级选择器。它表示选择紧接在 .item:hover 元素后出现的 .item 元素，也就是 .item:hover 元素的同级兄弟元素。当用户将鼠标悬停在某个 .item 元素上时，与它同级的 .item 元素就会变成半透明。

要注意的是，同级选择器只能选择跟目标元素在同一个父元素下的同级元素。如果要选择其他父元素下的元素，就需要使用后代选择器或其他类型的选择器。