Hi我是前端人类学在前端开发中UI 组件库已然成为标配。Vant、Element、Ant Design 等成熟方案提供了开箱即用的能力但过度依赖组件库也带来了包体积膨胀、定制困难、样式覆盖复杂等问题。本文将以纯 CSS 的方式手写四个高频通用组件——弹窗、下拉菜单、树形控件、数据表格不依赖任何 JavaScript 逻辑仅靠 CSS 完成结构与交互。文章目录一、基础准备CSS 交互的基石二、弹窗Modal最经典的交互组件三、下拉菜单Dropdownhover 与 focus 的较量四、树形控件Tree无限层级的展开折叠五、数据表格Table纯 CSS 的极致组织六、高级技巧与注意事项一、基础准备CSS 交互的基石在开始之前需要明确纯 CSS 实现交互的几种关键机制:hover伪类悬停触发展开/高亮适用于简单的悬浮交互。:target伪类通过 URL 锚点切换显示状态适用于弹窗、Tab 切换等。checkbox:checked技巧利用隐藏的 checkbox 和 label 联动实现点击切换状态是纯 CSS 交互最常用的方式。focus-within与focus聚焦状态控制子元素样式适用于下拉菜单的展开。本文以checkbox:checked为主流方案兼顾:target和focus-within的适用场景。二、弹窗Modal最经典的交互组件弹窗的核心需求是触发显示 → 遮罩层 → 内容居中 → 关闭按钮。纯 CSS 实现利用:target伪类通过锚点切换显示状态!-- 触发按钮 --ahref#modal-democlassbtn打开弹窗/a!-- 弹窗结构 --divclassmodalidmodal-demodivclassmodal-overlaydivclassmodal-contentahref#classmodal-close×/ah2确认操作/h2p此操作不可撤销是否继续/pdivclassmodal-actionsahref#classbtn btn-secondary取消/aahref#classbtn btn-primary确认/a/div/div/div/div核心样式.modal{position:fixed;inset:0;z-index:999;display:none;/* 默认隐藏 */}.modal:target{display:block;/* 锚点命中时显示 */}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;}.modal-content{background:#fff;border-radius:16px;padding:32px 40px;max-width:480px;width:90%;position:relative;animation:modalFadeIn 0.25s ease;}keyframesmodalFadeIn{from{opacity:0;transform:scale(0.95)translateY(12px);}to{opacity:1;transform:scale(1)translateY(0);}}.modal-close{position:absolute;top:12px;right:16px;font-size:28px;color:#999;text-decoration:none;line-height:1;}⚠️ 注意:target会改变浏览器 URL 哈希可能影响路由。如果希望完全不留历史记录可以改用checkbox:checked方式配合label的for属性控制。三、下拉菜单Dropdownhover 与 focus 的较量下拉菜单的核心需求悬停或点击展开选项列表。最简单的纯 CSS 实现依赖:hoverdivclassdropdownbuttonclassdropdown-trigger菜单 ▾/buttonulclassdropdown-menuliahref#个人中心/a/liliahref#设置/a/liliahref#退出登录/a/li/ul/div.dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:160px;background:#fff;border-radius:8px;box-shadow:0 8px 30pxrgba(0,0,0,0.12);padding:8px 0;list-style:none;}.dropdown:hover .dropdown-menu{display:block;}:hover的局限鼠标移出即收起无法点击内部元素交互。更好的方案使用checkbox:checked实现点击切换labelclassdropdown-toggleinputtypecheckboxclassdropdown-check/span菜单 ▾/spanulclassdropdown-menuliahref#选项一/a/liliahref#选项二/a/li/ul/label.dropdown-check{display:none;}.dropdown-menu{display:none;}.dropdown-check:checked ~ .dropdown-menu{display:block;}注意~是后续兄弟选择器要求.dropdown-menu必须与 checkbox 同级且在之后。四、树形控件Tree无限层级的展开折叠树形控件在组织架构、分类目录、权限管理等场景中非常常见。纯 CSS 实现的关键在于嵌套 checkbox控制子节点显隐。ulclasstreelilabelclasstree-toggleinputtypecheckboxclasstree-check/span 项目文档/span/labelulclasstree-childrenlispan 需求文档.md/span/lilispan 设计稿.fig/span/lililabelclasstree-toggleinputtypecheckboxclasstree-check/span 代码目录/span/labelulclasstree-childrenlispan index.html/span/lilispan style.css/span/li/ul/li/ul/li/ul.tree{list-style:none;padding-left:0;}.tree ul{list-style:none;padding-left:24px;}.tree-check{display:none;}.tree-children{display:none;}.tree-check:checked ~ .tree-children{display:block;}.tree-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 0;}.tree-toggle:hover{color:#4f8cf7;}在:checked ~ .tree-children中~选择器要求 checkbox 与子列表是兄弟关系这正是上面的结构设计每个li中checkbox 在label内ul.tree-children与label同级。五、数据表格Table纯 CSS 的极致组织表格的核心需求是数据展示、行列对齐、斑马纹、悬停高亮、固定表头。不需要复杂交互时纯 CSS 即可完成精美的表格样式。divclasstable-wrappertableclasstabletheadtrth#/thth姓名/thth部门/thth职位/ththclasstext-right薪资/th/tr/theadtbodytrtd1/tdtd张明/tdtd技术部/tdtd高级工程师/tdtdclasstext-right¥28,000/td/trtrtd2/tdtd李红/tdtd产品部/tdtd产品总监/tdtdclasstext-right¥35,000/td/tr!-- 更多行 --/tbody/table/div核心样式.table-wrapper{overflow-x:auto;border-radius:12px;border:1px solid #e9edf2;}.table{width:100%;border-collapse:collapse;font-size:14px;}.table th{background:#f7f9fc;color:#1a2332;font-weight:600;padding:12px 16px;text-align:left;border-bottom:2px solid #e9edf2;white-space:nowrap;}.table td{padding:11px 16px;border-bottom:1px solid #f0f2f5;}/* 斑马纹 */.table tbody tr:nth-child(even){background:#fafbfc;}/* 悬停高亮 */.table tbody tr:hover{background:#eef5ff;}/* 固定表头配合 wrapper 高度 */.table-wrapper{max-height:400px;overflow-y:auto;}.table thead{position:sticky;top:0;z-index:10;}sticky定位让表头在滚动时保持可见overflow-y: auto配合max-height控制表格可视区域这是一个纯 CSS 实现的固定表头方案。六、高级技巧与注意事项1. 语义化与无障碍纯 CSS 实现交互时需要额外关注无障碍访问使用label包裹 checkbox扩大点击区域为交互元素添加role属性考虑键盘导航纯 CSS 无法完美支持键盘操作复杂场景仍需 JS 辅助2. 性能考量表格大量数据时nth-child选择器性能尚可但避免过度使用复杂选择器树形控件嵌套层级不宜过深建议 ≤ 5 层否则 CSS 选择器复杂度上升3. 扩展性设计将公共样式抽取为 CSS 变量方便主题定制:root{--modal-overlay:rgba(0,0,0,0.5);--modal-radius:16px;--dropdown-shadow:0 8px 30pxrgba(0,0,0,0.12);--table-border:#e9edf2;--table-hover:#eef5ff;}纯 CSS 实现通用 UI 组件并非为了替代成熟的组件库而是一次对 CSS 底层能力的深度探索。通过:target、:checked、:hover等伪类与选择器的组合我们能够在不引入 JavaScript 的情况下完成弹窗、下拉、树形、表格等常见组件的交互与样式。这种手写实践的价值在于精准控制每一行样式都清晰可控没有多余的框架代码极致轻量无需加载任何外部依赖首屏渲染更快深入理解掌握布局、选择器、伪类、动画等 CSS 核心能力在实际项目中可以根据需求灵活选择轻量页面手写组件复杂应用引入成熟库。手写的能力始终是前端工程师最坚实的底牌。