html - 仅在类的第一次或最后一次出现时应用 CSS

Question

我有一个table包含很多行的 HTML

 ________________________
|_1______________________|
|_2______________________|
|_3______________________|
|_4______________________|
|_5______________________|

这些行是可展开的，用户可以展开其中的多个

 ________________________
|_1______________________|
| 2                      |
| border-top             |
| border-bottom          |
|________________________|
|_3______________________|
| 4 ...                  |

我需要突出显示border-top和border-bottom扩展的行。

但是，如果展开相邻的两行，则border-bottom上一行的 与下一行的 合并border-top。
有1px结果的边界1px + 1px，这是我不想要的。

使用 CSS 选择器可以避免这种情况吗？

标签： htmlcss

Answer 1

如果我很好理解：如果 2 个相邻行是打开的，那么第二行应该隐藏其上边框以避免双边框？

您可以使用兄弟运算符执行此操作+。

.row-expanded + .row-expanded {
  border-top: none;
}