CSS项目实战之简洁的邮件收件箱布局_列表交互与未读提示

Safari 对相邻兄弟选择器 + 的 DOM 更新响应有延迟，尤其配合 display: none 隐藏 checkbox 时，状态切换后样式不立即更新。这不是 bug，是渲染管线优化导致的竞态。

• 把 input[type="checkbox"] 改成 visibility: hidden; position: absolute;，别用 display: none
• 用 :has(> input:checked) 替代 input:checked + label（仅限支持 :has 的浏览器，Chrome 105+ / Safari 15.4+）
• 如果要兼容老版本 Safari，放弃纯 CSS 方案，用 JS 监听 change 事件并 toggle 类名，比死磕选择器更省心
• 测试时别只点鼠标——用空格键触发 checkbox，Safari 对键盘操作的样式响应更及时

滚动时未读计数卡顿，是因为重排还是别的

不是重排，是频繁读取 DOM 节点并遍历统计导致的主线程阻塞。哪怕只有 200 封邮件，每次 scroll 触发都跑一遍 document.querySelectorAll(".email-item.unread").length，帧率立刻掉到 30fps 以下。

• 把未读状态存在 JS 变量里，每次标记已读/未读时同步更新计数器，而不是实时查 DOM
• 用 IntersectionObserver 替代 scroll 事件监听——只在可视区域变化时才更新计数显示，减少无效计算
• 如果用 Vue/React，确保计数器是响应式依赖，不要在模板里写 {{ emails.filter(e => e.unread).length }} 这种高开销表达式
• CSS 里禁用 will-change: transform 在列表容器上——它会让浏览器为每一帧做额外图层合成，反而拖慢更新

最麻烦的其实是「已读」状态的持久化时机：用户划掉一行以为已读，但网络还没返回成功，此时刷新页面，那封邮件又变未读了。这个逻辑不在 CSS 范围内，但布局设计得越清晰，后续状态同步就越不容易出错。

终于介绍完啦！小伙伴们，这篇关于《CSS项目实战之简洁的邮件收件箱布局_列表交互与未读提示》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！