CSS 选择器：element1~element2

在 CSS 中，我们可以使用选择器来选择页面中的元素，并对其应用样式。element1~element2 选择器是一种相邻兄弟选择器，用于选择紧接在 element1 元素后出现的所有 element2 元素。

语法

element1 ~ element2 {
  /* 样式规则 */
}

• element1：表示要选择的第一个元素。
• ~：波浪符号表示选择所有紧接在 element1 元素后出现的 element2 元素。
• element2：表示要选择的紧接在 element1 后出现的元素。

示例

p ~ span {
  color: blue;
}

上面的示例将选择紧接在 p 元素后出现的所有 span 元素，并将其文字颜色设置为蓝色。

注意事项

• element1 和 element2 必须具有相同的直接父元素。
• 只有出现在 element1 后面的 element2 才会被选中。
• element2 可以是任意类型的元素，如标签名、类名、ID 等。
• 该选择器会选择所有匹配条件的 element2 元素，而不仅仅是第一个或最后一个。

应用场景

使用 element1~element2 选择器可以方便地选择页面中某个元素后的所有相邻兄弟元素，从而对它们进行样式设置或其他操作。

一些常见的应用场景包括：

• 在一个有序列表中，通过设置 li~li 的样式来为列表项之间添加分隔线。
• 通过设置某个表格单元格后的所有单元格的样式，为表格添加交替的行或列样式。
• 在搜索结果页面中，设置搜索关键词后的所有匹配项的样式，以突出显示搜索结果。

总之，element1~element2 选择器为我们提供了一种选择紧接在某个元素后出现的所有元素的简便方法，使得我们能够更灵活地操作页面中的元素。