CSS | 元素~元素选择器

介绍

在CSS中，元素~元素选择器是指用于选择某个元素后的所有兄弟元素。两个元素之间用波浪线符号(~)分隔。

语法

element1~element2 {
  /* styles */
}

• element1：要选择的元素。
• ~：选择器分隔符。
• element2：要选择的兄弟元素。

例子

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>西瓜</li>
  <li>葡萄</li>
</ul>

<p>以上为水果列表。</p>

<style>
  /* 选择橙子之后的所有兄弟元素 */
  li~li {
    color: red;
  }
</style>

在这个例子中，所有在橙子之后的兄弟元素都将变为红色。此选择器选择的元素为苹果、香蕉、西瓜和葡萄。注意，橙子本身不会受到选择器的影响。

注意事项

• 元素~元素选择器与元素+元素选择器不同。+选择器只会选择第一个紧邻的兄弟元素。
• 元素~元素选择器无法选择元素之前的兄弟元素或当前元素之后的元素。
• 大多数浏览器都支持元素~元素选择器，但它们在旧版浏览器中可能无法正常工作。