在CSS的语法规则中，双冒号::是伪元素的专属标识，用于选中某个元素的特定部分并为其添加样式，这些被选中的部分并不存在于HTML文档的实际DOM树中，是CSS动态生成的内容片段。
双冒号的基本定义
伪元素是CSS提供的一种机制，允许开发者为元素的某个特定部分设置样式，而不需要修改原始的HTML结构。双冒号::是CSS3规范中正式定义的伪元素语法，用来和单冒号的伪类做区分。常见的伪元素包括::before、::after、::first-line、::first-letter等，每个伪元素都有对应的选中范围。
常见双冒号伪元素用法
::before 和 ::after
这两个是最常用的伪元素，用于在选中元素的内容前面或后面插入生成的内容，需要配合content属性使用，否则伪元素不会生效。
以下是一个简单的示例，为所有段落标签的前面添加一个装饰符号：
/* 为p标签的内容前添加星号装饰 */
p::before {
content: "* ";
color: #ff0000;
font-weight: bold;
}
/* 为p标签的内容后添加提示文字 */
p::after {
content: "（结束）";
color: #666666;
font-size: 12px;
}
::first-line 和 ::first-letter
这两个伪元素用于选中块级元素的第一行文本和第一个字符，常用来做排版装饰。
示例代码如下：
/* 选中div的第一行文本，设置为蓝色加粗 */
div::first-line {
color: #0066cc;
font-weight: bold;
}
/* 选中p标签的第一个字符，放大两倍 */
p::first-letter {
font-size: 2em;
color: #ff6600;
float: left;
margin-right: 5px;
}
::selection
这个伪元素用于选中用户用鼠标拖拽选中的文本部分，可自定义选中后的背景色和文字颜色。
/* 自定义文本选中后的样式 */
::selection {
background-color: #ffff00;
color: #333333;
}
双冒号和单冒号的区别
很多开发者会混淆双冒号::和单冒号:的用法，两者的核心区别如下：
- 双冒号::用于伪元素，选中元素的特定部分，是CSS3的规范写法，部分旧版本浏览器也支持单冒号写伪元素，但推荐用双冒号区分。
- 单冒号:用于伪类，选中元素的某种状态，比如
:hover表示鼠标悬停状态，:first-child表示第一个子元素。
可以通过下面的表格更清晰地区分两者：
| 类型 | 语法标识 | 作用 | 常见示例 |
|---|---|---|---|
| 伪元素 | :: | 选中元素特定部分，生成虚拟内容 | ::before、::after、::first-letter |
| 伪类 | : | 选中元素的某种状态或位置 | :hover、:active、:nth-child() |
使用注意事项
- 伪元素必须设置
content属性才会生效，即使不需要插入内容，也要写content: ""，否则伪元素不会被渲染。 - 伪元素默认是行内元素，如果需要设置宽高，需要手动修改
display属性为block或者inline-block。 - 伪元素不属于DOM树，无法通过JavaScript直接选中操作，只能通过CSS控制其样式。
- 部分旧版本浏览器（如IE8及以下）不支持双冒号写法，如果需要兼容这些浏览器，可以使用单冒号写伪元素，比如
:before、:after。
实际应用场景
双冒号伪元素在实际开发中有很多实用场景，比如：
- 为链接添加外部链接的小图标，不需要额外添加HTML标签。
- 实现卡片的阴影装饰、角标效果。
- 清除浮动时，用
::after伪元素添加clear属性。
以下是一个用::after清除浮动的示例代码：
/* 清除浮动的通用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
掌握双冒号伪元素的用法，可以让我们在不增加额外HTML结构的前提下，实现更多丰富的页面效果，提升开发效率。