CSS | 元素~元素选择器

在 CSS 中，元素~元素选择器是用来选择某个元素之后跟着出现的同一级别的另一个元素。它的语法如下：

element1 ~ element2 {
  /* styles */
}

其中，element1 和 element2 分别代表要选择的两个元素。这个选择器选中的是 element1 之后的第一个 element2 元素。

用法示例

下面是一个示例，我们用 ~ 选择器来设置某个元素之后的元素的样式：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li class="highlight">橙子</li>
  <li>葡萄</li>
  <li>西瓜</li>
</ul>

.highlight ~ li {
  color: gray;
}

上面的 CSS 代码将会选中 class 属性为 highlight 的 li 元素之后的所有 li 元素，并将它们的文字颜色设置为灰色。

注意事项

使用元素~元素选择器时，注意选择的两个元素必须是同一级别的元素，而且它们之间必须有某个共同的父元素。

总结

元素~元素选择器用来选择某个元素之后的同级别元素。它的语法非常简单，但要注意选取的是同级别的元素，而且要有一个共同的父元素。