未读邮件应通过左侧4px竖条标识，颜色使用css变量并满足wcag aa标准；整行点击需用pointer-events控制链接交互；safari多选失效时改用visibility:hidden或:has()选择器；未读计数须缓存状态而非实时遍历dom。
怎么让未读邮件在列表里一眼被识别
关键不是加粗或变色，而是用视觉层级压倒其他状态——未读必须有独立的左边界标识，且颜色对比度要满足 WCAG AA 标准（比如 #007bff 比 #6c757d 更可靠）。纯靠文字“未读”标签容易被忽略，用户扫视时根本不会读字。
- 用
::before生成一个 4px 宽的左侧竖条，background-color设为品牌主色，不依赖文字 - 避免对
:hover或:focus状态覆盖未读样式——鼠标移上去就消失，等于废掉一半提示 - 别用
opacity降已读项透明度，它会让整个行变模糊，反而干扰阅读节奏 - 如果支持深色模式，竖条色值不能硬编码，得走 CSS 变量，比如
var(--unread-indicator)
点击整行触发选中但不误触链接怎么办
收件箱列表里每行都有发件人、主题、时间，还可能嵌套 <a></a> 链接（比如跳转到详情页），但用户习惯点整行选中/标记已读。这时候 pointer-events: none 加给内部链接再补回 pointer-events: auto 是最稳的解法。
- 给列表项容器（如
.email-item）设position: relative和cursor: pointer - 给内部所有
<a></a>加pointer-events: none，再单独给<a class="email-link"></a>加pointer-events: auto - 千万别用
event.stopPropagation()拦点击事件——移动端长按、双击、手势会全乱套 - 如果用了 React/Vue，不要在
@click里手动调preventDefault()，它和原生语义冲突，导致键盘Enter无法触发
为什么 :checked + label 实现的多选总在 Safari 里失效
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 范围内，但布局设计得越清晰，后续状态同步就越不容易出错。
