CSS | :范围内选择器

在 CSS 中，冒号（:）是众所周知的伪类和伪元素的选择器，但是在某些情况下，冒号也可以用于范围内选择器来定位你想要的元素。

什么是范围内选择器？

范围内选择器将选择器限制为两个元素之间的所有元素。例如，你可能想要选择两个标题之间的所有段落或两个列表项之间的所有图像。范围内选择器使这个过程变得容易。

下面是范围内选择器的语法：

element1~element2 selector {
  /* styles */
}

这表示当 element2 位于 element1 之后时，选择器将被应用于两者之间的所有元素。所选元素的具体数量取决于这两个元素之间有多少其他元素。

这里有一个示例：适用于两个 h2 标题之间的所有段落。

h2~p {
  /* styles */
}

范围内选择器的用途

范围内选择器可以在一些常见的任务中派上用场，例如：

• 可以在两个特定元素之间应用特定的样式
• 可以更准确地选择您想要应用样式的元素
• 可以构建更有用的选择器，这些选择器不仅仅考虑元素的类型或类，还考虑它们在文档中的位置。

范围内选择器也可以用于相邻的兄弟元素之间。这就是使用加号（+）而不是波浪线（~）的方式。

下面是一个例子：适用于 h1 和其后一个 p 元素之间的所有 strong 元素。

h1 + p strong {
  /* styles */
}

结论

使用范围内选择器可以很容易地选择两个元素之间的所有元素，从而使样式更加容易应用和管理。此外，通过结合其他选择器，你可以构建更有用和具体的选择器来定位你想要的元素。