如何仅用CSS为<tr>内首个及最后一个可见<td>设置样式？

嘿，我完全懂你的烦恼——想给表格行里**第一个和最后一个可见的<td>**加样式，用jQuery虽然能搞定，但要处理各种隐藏/可见的组合场景，测试起来确实费时间。你试过的那些CSS方案没生效，其实是因为CSS的:first-child/:last-child这类选择器是基于DOM结构的位置，不管元素是否可见，所以.visible:first-child只会匹配「既是DOM里第一个子元素，又有visible类」的<td>，如果第一个<td>是隐藏的，后面的可见<td>根本不会被选中，同理:last-child也是一样的问题。

不过现在有个纯CSS的解决方案了——利用CSS的:has()伪类（现代浏览器已经广泛支持了：Chrome 105+、Firefox 121+、Safari 15.4+），它允许我们根据父元素内子元素的状态来选择目标元素，刚好能解决这个“找可见元素的首尾”问题。

可行的CSS代码示例 #

/* 重置td的显示属性，注意不要用block破坏表格布局 */
.visible { display: table-cell; }
.hidden { display: none; }

/* 给第一个可见的<td>设置样式 */
tr > td.visible:first-child,
tr:has(> td:first-child.hidden) > td.visible:first-of-type {
  background-color: #ffeb3b;
  font-weight: bold;
}

/* 给最后一个可见的<td>设置样式 */
tr > td.visible:last-child,
tr:has(> td:last-child.hidden) > td.visible:last-of-type {
  background-color: #2196f3;
  color: #fff;
}

代码解释 #

• 第一组选择器：
  • tr > td.visible:first-child：处理表格行里第一个子元素就是可见的情况；
  • tr:has(> td:first-child.hidden) > td.visible:first-of-type：处理第一个子元素是隐藏的，选择该行里第一个出现的可见<td>。
• 第二组选择器同理，针对最后一个可见的<td>，覆盖了最后一个子元素是隐藏的场景。

兼容旧浏览器的替代方案 #

如果你的项目需要兼容不支持:has()的旧浏览器，那还是得借助JS，但可以把代码写得更简洁好维护：

// 遍历每一行，给首尾可见td加类
$('tr').each(function() {
  const $visibleTDs = $(this).find('td.visible');
  $visibleTDs.first().addClass('first-visible');
  $visibleTDs.last().addClass('last-visible');
});

然后在CSS里给.first-visible和.last-visible写样式就行，这样只需要一次DOM遍历，场景覆盖也更全面。

内容的提问来源于stack exchange，提问作者Badrinarayana