:first-of-type在表格中选的是第一行而非第一列；要选第一列须用tbody tr td:first-of-type等限定作用域的选择器，避免因隐式tbody或结构变化导致失效。
table tr:first-of-type 选的是第一行，不是第一列
很多人写 table tr:first-of-type 想“美化第一列”，结果样式全 applied 到整行——因为 tr 是行元素，:first-of-type 在 table 下找的是第一个 tr，即表头或首数据行，和“列”完全无关。
要控制“第一列”，必须作用在 td 或 th 上，且得限定其在每行中的位置。但 :first-of-type 对列无效：它不按列序匹配，只按 DOM 中同类标签的出现顺序。
-
tr td:first-of-type→ 每行中第一个td（即第一列的单元格），✅ 正确路径 -
table td:first-of-type→ 整个表格里所有td中第一个出现的（通常是第一行第一列），❌ 只命中一个单元格 -
td:first-of-type（无父级限定）→ 全局所有td的首个，极易误配页脚、嵌套表格等
tbody tr td:first-of-type 才是安全的第一列选择器
真实表格常含 thead 和 tbody，直接写 tr td:first-of-type 会把表头行（th）也卷进来，而 th 不是 td，所以不会被匹配——这看似“刚好跳过表头”，但不可靠：如果 tbody 为空，或有人把数据行写在 thead 里，逻辑就崩了。
显式限定作用域才是稳妥做法：
立即学习“前端免费学习笔记（深入）”；
- 用
tbody tr td:first-of-type精准选中 tbody 内每行的第一个td - 若需包含表头第一列，单独加
thead tr th:first-of-type - 避免用
table > tr > td:first-of-type：现代 HTML 表格结构强制要求thead/tbody包裹，直接子选择器会失效
first-of-type 在表格中容易踩的兼容性坑
:first-of-type 在 IE9+、Chrome/Firefox/Edge 全系支持，但表格渲染有个隐藏陷阱：浏览器会自动补全缺失的 tbody。比如你写：
<table> <tr><td>A</td><td>B</td></tr> </table>
实际 DOM 中，浏览器插入了隐式 tbody，所以 table tr 实际等于 table > tbody > tr。这意味着：
-
table tr:first-of-type仍有效（因隐式tbody不影响tr类型计数） -
table td:first-of-type会匹配到第一个td，但它属于隐式tbody下的首个td，不是“每行第一列” - 服务端渲染或框架（如 React）若输出带显式
tbody的结构，CSS 必须与之对齐，否则选择器失效
想高亮第一列？别只靠 first-of-type
td:first-of-type 能选中每行首个单元格，但它不区分“第1列”和“该行第一个 td”——如果某行开头是 th（比如混合表头），或用了 colspan，这个选择器就会偏移。
真正稳的做法是组合使用：
-
tbody tr > :nth-child(1)：按列位置选，无视标签类型，适合固定列数表格 -
tbody tr > td:nth-of-type(1)：只选td类型的第1个子元素，比:first-of-type更可控 - 给第一列加 class（如
class="col-id"）：语义明确，JS 和 CSS 都易维护
伪类选择器省 class 是好主意，但表格结构复杂时，硬靠 :first-of-type 推断列序，就像靠天气预报猜股票——短期可能准，长期必翻车。
