如何通过CSS选择器定位Weapon表头后文本为Abilities的指定th元素

可以直接将下述选择器写入外部样式表使用，无需修改原有自动生成的HTML代码，兼容全版本主流浏览器，不会误匹配非目标元素：

th:first-child + th + th + th + th + th + th:last-child {
  /* 在此处编写你需要应用到目标Abilities表头的样式 */
}

匹配逻辑说明 #

该选择器完全基于固定页面结构实现，不依赖全局计数的:nth-child/:nth-of-type，也不需要实验性的文本匹配伪类，匹配规则完全贴合自动生成代码的固定结构：

• 先定位每个表头行中作为第一个子元素的<th>（即每个表格首列的表头）
• 向后匹配紧邻的第6个兄弟<th>元素（对应首列表头后的第6列，也就是总列数为7的表头的最后一列）
• 额外要求该元素必须是所在表头行的最后一个子元素，排除列数更多的表格的误匹配

有效性验证 #

对照提供的三个表格测试，无错配漏配：

• 第一个Psyker能力表：表头共5个<th>，首列后最多只有4个兄弟元素，无法匹配到第6个后续兄弟，无命中
• 第二个单位属性表：表头共10个<th>，首列后数第6个元素是W列表头，其后方还有3个兄弟<th>，不符合:last-child要求，无命中
• 第三个武器表：表头共7个<th>，首列后数第6个元素正好是内容为Abilities的目标表头，且是该行最后一个子元素，精准命中

多数据集场景增强版 #

如果后续使用场景只需要兼容2022年之后发布的现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+），可以使用:has()伪类编写容错性更高的版本，即使后续新增其他列数为7的非武器表格，也不会出现误匹配：

tr:has(th:first-child + th + th + th + th + th + th:last-child) th:last-child {
  /* 自定义样式 */
}

由于生成页面的应用已经停止维护，核心结构不会发生变更，优先推荐使用兼容性更好的基础版选择器。

内容的提问来源于stack exchange，提问作者Mekz Scrap Shop