表格行/列交叉高亮的核心逻辑是利用:has()反向定位列：悬停单元格时，通过td.col-n:has(~ tr td:hover)匹配同列所有单元格，前提是列有带统一class的th/td锚点且dom顺序正确（thead在tbody前、列单元格同级排列），否则需降级为仅行高亮。
表格行/列交叉高亮的核心逻辑是什么
关键在于：鼠标悬停某单元格时，既要高亮它所在整行（tr:hover），又要高亮它所在整列——但CSS原生不支持“向上找父级再找同级兄弟的特定列”，必须靠 :has() 从列方向反向定位。真正起作用的是“当前列中是否有被悬停的单元格”，而不是“当前单元格是否被悬停”。
用 :has() 选中整列需要满足什么条件
必须确保列有可选中的载体。HTML 表格里 col 元素不渲染、无法绑定伪类；所以实际做法是给每列的 th 或 td 添加统一 class（如 col-0, col-1），再用 :has() 检测该列是否存在 :hover 状态的单元格：
table td.col-0:has(~ tr td:hover),
table th.col-0:has(~ tr td:hover) {
background-color: #eef7ff;
}
注意两点：
-
:has()必须写在列单元格（th/td）上，不能写在col或tr上 -
~是后续兄弟选择器，依赖 HTML 中列单元格出现在所有数据行之前（即thead在tbody前，且每列头单元格按顺序排列） - 若表头跨行（
rowspan）或使用colgroup，:has()将失效，必须改用 JS 或重构 DOM 结构
为什么 hover 效果常只触发一半（行亮了列不亮）
常见原因是 DOM 顺序和选择器权重问题：
- 如果
tbody在thead前，th.col-0:has(~ tr td:hover)找不到后续的td:hover—— 因为~只匹配**后面**的兄弟元素 - 解决办法：把带
col-*class 的th放在thead最后一行，并确保它和tbody同级（即都在table下）；或者改用tbody tr:first-child td作为列锚点 - 另一个坑：
:hover在td上触发时，若td有 padding/border，悬停热区可能比视觉区域大，导致列高亮“提前出现”或“延迟消失”
兼容性和性能要注意什么
:has() 目前（2024）在 Chrome 105+、Firefox 121+、Safari 15.4+ 支持，Edge 同 Chrome。但有硬伤：
- 不能在 CSSOM 中通过
document.styleSheets动态插入含:has()的规则（会直接报错） - 在复杂表格（>100 行 × >20 列）中，每个
:has()规则都会触发全表扫描，滚动或悬停时可能卡顿 - 若需支持旧浏览器，不要 fallback 到 JS 模拟
:has()，而是降级为仅高亮行（tr:hover），列高亮直接不启用
真正难的不是写对选择器，而是让列锚点稳定存在、DOM 顺序可控、且不因合并单元格或动态渲染破坏结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
