如何在HTML表格中通过first-child伪类美化首列单元格-html教程-PHP中文网

td:first-child不生效的主因是tr内存在注释等干扰子节点，导致td非首个子元素；应限定tbody tr td:first-child并避免混用th/td、错误链式伪类及未作用域限制的选择器。

如何在html表格中通过first-child伪类美化首列单元格

直接用 td:first-child 就能选中每行首列单元格，但必须确保它确实是父元素（tr）的第一个子元素——这点最容易出错。

为什么 `td:first-child` 有时不生效？

常见原因是 tr 内部存在干扰节点：

HTML 中写了注释（如 ），它算作一个子节点，导致第一个 td 实际是第二个子元素
用了 th 和 td 混排，比如表头行里 th 在前、数据行里却以 td 开头，但某些框架或模板会自动插入空 td 或占位元素
表格结构用了 thead/tbody，但 CSS 选择器没限定作用域，比如写成 table td:first-child 会同时匹配 thead 和 tbody 里的首列，而你只想改数据行

精准控制首列样式：推荐写法

最稳妥的写法是显式限定层级和容器：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

只给数据行首列加背景：tbody tr td:first-child
如果首列要统一颜色但各行不同，用 nth-child 组合：tbody tr:nth-child(1) td:first-child、tbody tr:nth-child(2) td:first-child
避免误选表头首列（th）：不用 td, th:first-child 这种错误写法——它等价于 td 和 th:first-child，应分开写成 thead th:first-child 和 tbody td:first-child

兼容性与性能注意点

:first-child 是 CSS2.1 就支持的伪类，IE9+ 完全可用，无需前缀；但它在动态插入行时自动生效，无需 JS 干预——前提是插入的是标准 tr 节点。

React/Vue 渲染时若用了条件渲染（如 v-if 或 && 表达式），可能让 tr 不是连续子节点，此时 :first-child 仍按 DOM 顺序计算，但结果可能不符合预期
大量行数下（>1000 行），:first-child 本身无性能问题，但若配合复杂渐变背景或阴影，建议用 background-color 这类轻量属性
别试图用 td:first-child:first-of-type —— 伪类不能链式叠加，浏览器会忽略整个规则

真正容易被忽略的，是表格中 colgroup 或 col 标签的存在——它们虽不渲染为可见元素，但属于 table 的子元素，不会影响 tr 内部的 :first-child 判断；但如果你把样式写在 table td:first-child 上，就可能被意外继承或覆盖。