CSS | ::在选择器之前

在 CSS 中，:: 是伪元素（pseudo-element）的标识符。它用于在选择器之前指定一个虚拟的元素，在文档中不存在。伪元素用于在文档中插入特殊的内容或格式化现有内容。

::before 和 ::after

::before 和 ::after 是最常见的伪元素。它们用于在选定元素的内容的前面或后面添加内容。这些伪元素通常用于添加样式具有装饰性质的内容，如引号或图标。

下面是一个使用 ::before 和 ::after 的例子：

blockquote::before {
  content: '\201C';
  font-size: 3em;
}

blockquote::after {
  content: '\201D';
  font-size: 3em;
}

这段 CSS 代码会在 <blockquote> 元素的内容前后添加引号。

::first-letter 和 ::first-line

::first-letter 伪元素用于格式化所选文本块的第一个字母。 ::first-line 伪元素用于格式化所选文本块的第一行文本。

下面是一个使用 ::first-letter 的例子：

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

这段 CSS 代码会将 <p> 元素的第一个字母设置为加粗的 2em 大小。

下面是一个使用 ::first-line 的例子：

p::first-line {
  text-transform: uppercase;
  font-weight: bold;
}

这段 CSS 代码会将 <p> 元素的第一行文本转换为大写并加粗。

::selection

::selection 伪元素用于选择器选中文本部分的样式。比如下面的这段 CSS 代码会将选中文本的背景颜色设置为橙色：

::selection {
  background-color: orange;
}

需要注意的是，不同的浏览器对 ::selection 的支持不一致。某些浏览器可能只支持部分 CSS 样式。

总结

在 CSS 中，:: 是伪元素（pseudo-element）的标识符。::before 和 ::after 用于在所选元素的内容的前面和后面添加虚拟元素。 ::first-letter 用于格式化所选文本块的第一个字母。 ::first-line 用于格式化所选文本块的第一行文本。 ::selection 用于设置所选文本的样式。需要注意的是，不同的浏览器对伪元素的支持程度可能不同。