前端Wiki/CSS3/基础/新选择器

UI 状态伪类

UI 状态伪类专门针对表单控件的交互状态，让表单反馈完全由 CSS 驱动：

:checked：单选/复选被选中。搭配 + 或 ~ 可以做出「纯 CSS 开关」——用隐藏的 checkbox 配合兄弟元素切换样式。
:disabled / :enabled：控件禁用 / 可用状态。
:focus：获得焦点，输入框描边高亮必备。
:hover / :active：悬停 / 按下。
:required / :optional：是否带 required 属性，可给必填项加视觉标记。
::placeholder：伪元素，定制输入框占位文字的颜色。

纯 CSS 开关是这组伪类的招牌应用：checkbox 视觉上隐藏但保持可用，它的选中状态通过兄弟选择器控制滑块位置和背景色，不写一行 JS。

本节要点:checked/:disabled/:focus/:required 是表单样式四件套；「隐藏 checkbox + 兄弟选择器」可实现纯 CSS 开关；占位文字用 ::placeholder 定制。

CSS

<style>
  /* 纯 CSS 开关：checkbox + label */
  .switch input { display: none; }
  .switch .track {
    display: inline-block;
    width: 44px; height: 24px;
    border-radius: 12px;
    background: #ccc;
    position: relative;
    vertical-align: middle;
    transition: background .2s;
  }
  .switch .track::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left .2s;
  }
  /* 选中时：轨道变色 + 滑块右移 */
  .switch input:checked + .track { background: #39c5cf; }
  .switch input:checked + .track::after { left: 22px; }
</style>
<label class="switch">
  <input type="checkbox">
  <span class="track"></span>
  纯 CSS 开关
</label>

🔗 相关词条CSS 伪元素选择器 JS 元素伪类

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读