CSS 伪元素

CSS 伪元素

了解如何使用伪元素来设置元素的特定部分的样式。

什么是伪元素？

CSS 伪元素是添加到选择器中的一个关键字，允许您为选定元素的特定部分设置样式。它们的作用类似于在标记中添加虚拟元素，而无需实际修改 HTML。

常见用途包括：

• 为文本块的第一行或第一个字母设置样式（::first-letter，::first-line）。
• 在元素的实际内容之前或之后插入内容（::before，::after）。
• 为表单输入框中的占位符文本设置样式（::placeholder）。
• 为用户选中的元素部分设置样式（::selection）。
• 为列表标记设置样式（::marker）。

语法：双冒号 ::

现代 CSS 语法要求使用双冒号（::）来区分伪元素和伪类（伪类使用单冒号 :）。

selector::pseudo-element { property: value; }

	历史说明： CSS1 和 CSS2 对伪元素和伪类都使用单冒号（:）。尽管浏览器通常为了向后兼容性而支持旧伪元素（如 :first-line、:first-letter、:before、:after）的单冒号语法，但**现代 CSS 应始终使用双冒号（::）**以保持清晰并遵循标准。

::first-line 伪元素

应用于块级元素（如 <p>、<div>）的第一行。第一行的确切长度取决于元素宽度、字体大小等因素。

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

只有部分 CSS 属性可以与 ::first-line 一起使用。常见的包括 font、color、background、spacing 和 text decoration 属性。请查阅 MDN 获取完整列表。

::first-letter 伪元素

应用于块级元素的第一行的第一个字母，常用于创建“首字下沉”效果。

p::first-letter {
  color: #8A2BE2; /* 紫罗兰蓝色 */
  font-size: 2.5em; /* 显著放大 */
  float: left; /* 允许文本环绕 */
  margin-right: 0.1em;
  line-height: 0.8; /* 调整行高以对齐 */
}

与 ::first-line 类似，只有某些 CSS 属性适用。这些通常包括 font、color、background、margin、padding、border、text-decoration 和 float 属性。

::before 和 ::after 伪元素

它们可以说是用途最广泛的伪元素。它们在元素的实际内容之前（::before）或之后（::after）插入生成的内容。它们在元素内部渲染，但在其子元素之前/之后。

关键的是，它们必须使用 content 属性来指定要插入的内容，即使内容为空（content: '';）也是如此。

示例：添加引号

blockquote::before {
  content: '“'; /* 开头引号 */
  font-size: 2em;
  color: gray;
  margin-right: 5px;
}

blockquote::after {
  content: '”'; /* 结尾引号 */
  font-size: 2em;
  color: gray;
  margin-left: 5px;
}

示例：装饰性形状或图标

.link-external::after {
  content: ' ↗'; /* Unicode 箭头 */
  font-size: 0.8em;
  display: inline-block; /* 变换可能需要 */
  margin-left: 3px;
}

/* 自定义列表标记的样式 */
li::before {
  content: '► ';
  color: dodgerblue;
  margin-right: 8px;
  /* 需要在 li 或 ul 上设置 list-style: none */
}

::before 和 ::after 几乎可以像常规元素一样设置样式（background、border、padding 等），因此它们可用于各种装饰效果。

::selection 伪元素

应用于用户使用鼠标或键盘高亮（选择）的元素部分。

只能应用有限的属性集：color、background-color、text-shadow、text-decoration。

::selection {
  color: white;
  background-color: #FF4500; /* 橙红色 */
}

与类结合使用

伪元素可以与其他选择器（例如类）结合使用，以实现更精确的目标定位。

p.important::first-letter {
  color: red;
  font-size: 1.5em;
}

.tooltip::after {
  content: attr(data-tooltip); /* 从 data-* 属性显示工具提示文本 */
  /* 工具提示外观的附加样式 */
  position: absolute;
  /* ... 更多样式 ... */
}

其他值得注意的伪元素

• ::placeholder：为 <input> 和 <textarea> 元素中的占位符文本设置样式。
• ::marker：为列表项（<li>）的标记（项目符号或数字）设置样式。

input::placeholder {
  color: lightgray;
  font-style: italic;
}

li::marker {
  color: green;
  font-size: 1.2em;
}

总结表格

常用 CSS 伪元素（::）

选择器	示例	描述
::after	p::after	在每个 <p> 元素的内容之后插入内容。
::before	p::before	在每个 <p> 元素的内容之前插入内容。
::first-letter	p::first-letter	选择每个块级元素（如 <p>）的第一个字母。
::first-line	p::first-line	选择每个块级元素（如 <p>）的第一行。
::marker	li::marker	选择列表项的标记（项目符号/数字）。
::placeholder	input::placeholder	选择输入框或文本区域中的占位符文本。
::selection	::selection	选择用户高亮显示的元素部分。

常用 CSS 伪类（:）

伪类根据元素的状态或在文档树中的位置来选择元素。

选择器	示例	描述
:active	a:active	选择一个元素（如链接）在被激活时（例如，被点击时）。
:checked	input:checked	选择被勾选的复选框或单选按钮元素。
:disabled	input:disabled	选择禁用的表单元素。
:enabled	input:enabled	选择启用的表单元素。
:empty	p:empty	选择没有子节点（包括文本节点）的元素。
:first-child	li:first-child	选择作为其父元素的第一个子元素的元素。
:last-child	li:last-child	选择作为其父元素的最后一个子元素的元素。
:first-of-type	p:first-of-type	选择同级元素中其类型的第一个元素。
:last-of-type	p:last-of-type	选择同级元素中其类型的最后一个元素。
:focus	input:focus	选择当前具有输入焦点的元素。
:focus-visible	button:focus-visible	选择具有焦点且浏览器确定焦点应该可见的元素（例如，键盘焦点）。
:focus-within	div:focus-within	选择一个元素，如果它或其任何后代元素具有焦点。
:hover	a:hover	当用户使用指向设备悬停在元素上时选择该元素。
:invalid	input:invalid	选择内容未通过验证的表单元素。
:valid	input:valid	选择内容通过验证的表单元素。
:link	a:link	选择未访问过的链接。
:visited	a:visited	选择已访问过的链接（出于隐私考虑，样式选项有限）。
:not(selector)	li:not(.special)	选择不匹配提供的选择器的元素。
:nth-child(n)	li:nth-child(2)	根据元素在其同级元素中的位置选择（例如，第二个子元素）。
:nth-of-type(n)	p:nth-of-type(odd)	根据元素在其同类型同级元素中的位置选择（例如，奇数段落）。
:required	input:required	选择具有 ‘required’ 属性的表单元素。
:optional	input:optional	选择不具有 ‘required’ 属性的表单元素。
:root	:root	选择文档的根元素（通常是 <html>）。常用于 CSS 变量。

在 MDN 上进一步探索伪元素和伪类。