如何在HTML表格中通过last-of-type选择器突出显示最后一列数据-html教程-PHP中文网

:last-of-type无法选中表格最后一列，因它匹配同标签兄弟元素的最后一个，故td:last-of-type仅选每行末单元格；固定列数时用td:nth-child(n)精准定位，动态列数需js计算并标记。

如何在html表格中通过last-of-type选择器突出显示最后一列数据

last-of-type 不能选中表格的“最后一列”

:last-of-type 匹配的是**同类型兄弟元素中的最后一个**，它看的是 HTML 元素标签名（如 td、th），而不是视觉上的“列”。表格中每一行的 td 是各自独立的兄弟关系，tr 下的 td:last-of-type 只会选中**每行的最后一个单元格**，而非整张表的“最后一列”——这是最常见的误解源头。

用 :nth-child(n) 定位固定列号更可靠

如果列数固定（比如总共有 5 列），直接用 td:nth-child(5) 或 th:nth-child(5) 即可精准命中最后一列所有单元格：

table td:nth-child(5),
table th:nth-child(5) {
  background-color: #ffecb3;
  font-weight: bold;
}

前提是列数稳定；列数动态变化时需配合 JS 计算列数再生成 CSS 类或内联样式
:nth-child() 从 1 开始计数，不是 0；:nth-last-child(1) 等价于 :last-child，但依然按行生效，不跨行
注意 colgroup + col 不参与渲染，无法用 CSS 伪类控制样式，只能设 width 或 background，且兼容性有限

用 CSS 自定义属性 + JS 动态标记最后一列

当列数不确定（如后端返回字段动态拼表），纯 CSS 无解，必须靠 JS 获取列数并打标记：

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

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

下载

const table = document.querySelector('table');
const headers = table.querySelector('thead tr').children;
const colCount = headers.length;

// 给每行每个单元格加 data-col-index 属性
for (const row of table.querySelectorAll('tr')) {
  for (let i = 0; i