CSS 表单选择器与伪元素选择器详解

1. 引言

在 CSS 中，选择器是样式规则的"入口"。除了常见的类选择器、ID 选择器和后代选择器之外，还有两类在实际项目中非常高频、却容易被忽视的选择器：

• 表单相关选择器 ：用于精准控制 input、button、select 等表单控件的状态与外观；
• 伪元素选择器：用于选中元素中并不存在于 HTML 结构里的"虚拟部分"，例如首行、首字母、占位符、滚动条等。

下面分别介绍表单选择器与伪元素选择器的用法。

2. 表单选择器

2.1 属性选择器：按 type 精准命中

表单控件最常用的定位方式，是通过属性选择器匹配 type 属性：

/* 所有文本类输入框 */
input[type="text"],
input[type="email"],
input[type="password"] {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 8px 12px;
}

/* 只针对复选框调整尺寸 */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2f81f7;
}

属性选择器支持多种匹配模式：

写法	含义
[attr]	存在该属性
[attr="value"]	属性值完全等于 value
[attr~="value"]	属性值以空格分隔的列表中包含 value
[attr^="value"]	属性值以 value 开头
[attr$="value"]	属性值以 value 结尾
[attr*="value"]	属性值包含 value

2.2 状态伪类：:enabled、:disabled、:checked

表单控件天然带有状态，CSS 提供了对应的状态伪类：

/* 禁用状态统一置灰 */
input:disabled,
button:disabled {
  background-color: #f6f8fa;
  color: #8c959f;
  cursor: not-allowed;
}

/* 选中的单选框/复选框 */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  accent-color: #1a7f37;
}

2.3 表单校验伪类：:required、:valid、:invalid

浏览器内置了表单校验能力，配合伪类可以做出"零 JS"的校验提示：

input:required {
  border-left: 3px solid #bf8700;
}

input:valid {
  border-color: #1a7f37;
}

input:invalid {
  border-color: #cf222e;
}

/* 只在用户交互过之后提示，避免页面一加载就飘红 */
input:not(:placeholder-shown):invalid {
  background-color: #fff5f5;
}

小技巧：:placeholder-shown 表示占位符正在显示，也就是输入框为空。用 :not(:placeholder-shown) 可以判断"用户已经输入了内容"，这是纯 CSS 校验的关键。

2.4 焦点相关：:focus、:focus-within、:focus-visible

/* 输入框获得焦点 */
input:focus {
  outline: 2px solid #2f81f7;
  outline-offset: 1px;
}

/* 子元素获得焦点时，父容器整体高亮 */
.form-item:focus-within {
  background-color: #f0f7ff;
}

/* 仅在键盘导航时显示焦点环，鼠标点击不显示 */
button:focus-visible {
  outline: 2px solid #2f81f7;
}

2.5 表单结构伪类：:first-of-type 等

在表单布局中，经常需要"第一个输入项不加下边框"这类效果：

.form-item:first-of-type {
  padding-top: 0;
}

.form-item:last-of-type {
  border-bottom: none;
}

.form-item:nth-of-type(odd) {
  background-color: #fafbfc;
}

3. 伪元素选择器

伪元素用双冒号 :: 表示（::before、::after 也兼容单冒号写法，但推荐双冒号）。它选中的是元素中"逻辑上存在、HTML 中不存在"的部分。

3.1 文本类伪元素：::first-line、::first-letter

.article p::first-line {
  font-weight: 600;
  color: #24292f;
}

.article p::first-letter {
  float: left;
  font-size: 3em;
  line-height: 1;
  margin-right: 8px;
  color: #cf222e;
}

注意：::first-line 和 ::first-letter 只能作用于块级元素，且可设置的属性有限（字体、颜色、背景等）。

3.2 生成内容：::before、::after

这是使用频率最高的伪元素，配合 content 属性可以在元素前后插入装饰性内容：

.badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1a7f37;
  margin-right: 6px;
}

.required-label::after {
  content: "*";
  color: #cf222e;
  margin-left: 2px;
}

要点：

• ::before / ::after 必须设置 content（哪怕是空字符串）才会渲染；
• 生成的内容不在 DOM 中，无法被选中、无法被 JS 直接获取，也不利于无障碍读屏，重要信息不要放在这里；
• 默认是行内元素，需要尺寸时要显式设置 display。

3.3 表单占位符：::placeholder

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

/* 兼容旧版写法 */
input::-webkit-input-placeholder {
  color: #8c959f;
}

::placeholder 只支持部分文本样式属性，padding、margin 等布局属性无效。

3.4 表单控件内部：::selection、::file-selector-button

/* 选中文本的高亮色 */
::selection {
  background-color: #2f81f7;
  color: #ffffff;
}

/* 文件上传按钮 */
input[type="file"]::file-selector-button {
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  background-color: #2f81f7;
  color: #ffffff;
  cursor: pointer;
}

3.5 滚动条伪元素：::-webkit-scrollbar

.scroll-box::-webkit-scrollbar {
  width: 8px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background-color: #d0d7de;
  border-radius: 4px;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
  background-color: #8c959f;
}

滚动条伪元素属于 WebKit 私有扩展，Firefox 需使用 scrollbar-width 与 scrollbar-color 标准属性。