第三章 · 3.3 节

其他伪元素

除了 ::before/::after 与排版类伪元素，浏览器还为一些特定场景开放了专属的伪元素接口，覆盖文本选中、表单占位符、列表符号乃至原生对话框的背景遮罩。

::selection

自定义用户用鼠标拖选文本时的高亮样式，只支持 color、background-color、text-shadow 等少量属性。

::selection {
  background: #d3985a;
  color: #ffffff;
}

试一试：用鼠标选中下面这段文字

选中我看看效果——本教程站点全局也应用了这一自定义样式。

定制表单占位文字的样式，注意它的默认颜色对比度较低，适当调整能提升可读性，但不宜与真实输入内容的颜色过于接近。

input::placeholder {
  color: #a39fb5;
  font-style: italic;
}

效果预览

作用于列表项 <li> 的项目符号或序号本身，无需再用 list-style: none + 伪元素模拟，即可直接改变颜色、大小甚至替换内容。

li::marker {
  color: #8a5a2e;
  font-size: .9em;
}
li.important::marker {
  content: "★ ";
}

效果预览

作用于以全屏模式或原生 <dialog> 弹出的元素背后的遮罩层，让我们无需额外的遮罩 div 即可定制蒙层颜色与模糊效果。

dialog::backdrop {
  background: rgba(38,35,58,.5);
  backdrop-filter: blur(2px);
}

作用于 <input type="file"> 内置的"选择文件"按钮，是少数几个可以直接美化原生表单控件子部件的接口之一。

input[type="file"]::file-selector-button {
  background: #3f5d54;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
}