如何为表格中首个带relegated类的行添加顶部红色边框

核心逻辑 #

因为降级区的位置不固定，不能依赖固定位置的nth-child(数字)选择器，得靠类选择器搭配兄弟选择器来精准定位降级区的第一行<td>元素。

可用的CSS代码 #

方法1：精准定位首个降级行

/* 找到紧跟在非降级行后面的第一个降级行，给它的所有td加顶部红色虚线边框 */
tr:not(.relegated) + tr.relegated td {
  border-top: 2px dashed red;
}

这个写法逻辑很直接：只要是第一个出现的降级行（前面紧邻的不是降级行），就给它的td加上边框，不管降级区在表格第几行都能生效。

方法2：先全加再覆盖（适合连续降级行）

如果所有降级行是连在一起的一组，也可以这么写：

/* 先给所有降级行的td加上顶部边框 */
tr.relegated td {
  border-top: 2px dashed red;
}
/* 给连续的下一个降级行的td去掉边框，只留第一行的 */
tr.relegated + tr.relegated td {
  border-top: none;
}

先给所有带.relegated的行的td加边框，再把后面连续的降级行的边框去掉，最后就只有降级区第一行的td保留红色虚线边框了。

为啥.relegated:nth-child(1) td没用？ #

nth-child(1)是选父元素里的第一个子元素，只有当带.relegated的行正好是表格第一行时才会生效，显然你的降级区不可能在最顶上，所以这个选择器不适用。

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