本文介绍如何使用现代 CSS :has() 伪类精准定位并样式化 DataTables FixedColumns 插件中每行的最后一个 .dtfc-fixed-left 单元格，无需 JavaScript 动态计算，兼顾可维护性与浏览器兼容性。
本文介绍如何使用现代 css `:has()` 伪类精准定位并样式化 datatables fixedcolumns 插件中每行的最后一个 `.dtfc-fixed-left` 单元格，无需 javascript 动态计算，兼顾可维护性与浏览器兼容性。
在使用 DataTables 的 FixedColumns 扩展时，固定列（如首 1–2 列）会自动被赋予 dtfc-fixed-left 类。当用户横向滚动时，为视觉上提示“右侧尚有内容”，常需在每行中最后一个固定列单元格的右侧边缘添加阴影、边框或高亮背景——但问题在于：固定列数量动态可变（0–2 列），且 HTML 结构中这些单元格并非连续位于
关键洞察在于：目标单元格的本质特征是——在其同级 ✅ 推荐解决方案（现代标准，简洁可靠）： 该选择器含义清晰： ? 实际效果验证（基于提问中的 HTML 结构）： ⚠️ 兼容性注意事项： ? 备选方案（兼容性兜底，纯 CSS）： ⚠️ 此方式依赖 DOM 顺序稳定性，不推荐作为首选；建议优先采用 :has() 并通过 CanIUse 检查目标环境支持度。 ? 总结：/
中，不存在后续兄弟节点也带有 .dtfc-fixed-left 类。这正契合 CSS 新增的逻辑选择器 :has() 的能力。 td.dtfc-fixed-left:not(:has(~ .dtfc-fixed-left)),
th.dtfc-fixed-left:not(:has(~ .dtfc-fixed-left)) {
box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.15);
/* 或使用背景渐变模拟阴影效果 */
background: linear-gradient(90deg, transparent 95%, #f0f0f0 95%);
} 和
；
被选中；
被选中；
若项目必须支持较老浏览器，可结合 :nth-of-type() 配合预设最大列数（如最多 2 列固定）：/* 当固定列为 1 列时生效 */
tr > td.dtfc-fixed-left:first-child,
tr > th.dtfc-fixed-left:first-child {
box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.15);
}
/* 当固定列为 2 列时生效（需确保结构稳定）*/
tr > td.dtfc-fixed-left:nth-of-type(2),
tr > th.dtfc-fixed-left:nth-of-type(2) {
box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.15);
}
利用 :not(:has(~ .dtfc-fixed-left)) 是解决“动态定位同类元素末位实例”这一典型场景的优雅 CSS 方案。它语义明确、零 JS 侵入、易于维护，完美适配 DataTables FixedColumns 的灵活配置。在现代浏览器主导的生产环境中，应作为首选实践；仅对遗留系统才考虑降级策略。
