如何用CSS&SASS实现：仅当tbody含多个compDetails-row时添加边框？

嘿，我明白你的困扰了！你想用SASS给tbody里带compDetails-row类的行加边框，但遇到只有单个该类元素时要移除边框的情况，而且:only-of-type没生效——这很正常，因为这个选择器的工作逻辑和你想的不一样！

为什么:only-of-type不生效？ #

:only-of-type是基于元素类型（比如<tr>）来判断的，而不是类。举个例子：

• 如果你的tbody里有两个<tr>（不管它们有没有compDetails-row类），:only-of-type不会匹配任何一个tr，因为tr类型的元素有多个；
• 就算tbody里只有一个带类的tr，但还有其他不带类的tr，:only-of-type也不会选中这个带类的tr，因为父元素里的tr类型元素不止一个。

所以这个选择器没法帮你区分“带该类的元素数量”，得换个思路！

解决方案 #

根据你的需求，这里有两种靠谱的实现方式：

方式1：用:has选择器（现代浏览器推荐） #

:has是CSS新出的选择器，可以直接判断父元素里是否存在某个子元素，非常直观：

tbody {
  // 先给所有带类的行加边框
  .compDetails-row {
    border-bottom: 1px solid #ddd; // 自定义你的边框样式
  }

  // 当tbody里只有一个.compDetails-row时，移除它的边框
  &:not(:has(.compDetails-row + .compDetails-row)) .compDetails-row {
    border-bottom: none;
  }
}

解释：tbody:not(:has(.compDetails-row + .compDetails-row)) 意思是“没有第二个.compDetails-row的tbody”，也就是tbody里只有一个该类元素，这时移除它的边框。

方式2：用兄弟选择器（兼容旧浏览器） #

如果需要兼容不支持:has的旧浏览器，可以用相邻兄弟选择器间接实现：

tbody {
  // 给第一个带类的行加边框，但只有当后面还有另一个带类的行时才生效
  .compDetails-row:first-of-type {
    border-top: 1px solid #ddd;
    // 只有存在下一个带类的行时，才保留边框
    &:not(:last-of-type) {
      border-bottom: 1px solid #ddd;
    }
  }

  // 给后面的每个带类的行都加上顶部边框（和上一行区分）
  .compDetails-row + .compDetails-row {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
}

这样，当tbody里只有一个.compDetails-row时，first-of-type同时也是last-of-type，所以不会有边框；当有多个时，所有行都会有边框。

验证效果 #

• 当tbody里有2个.compDetails-row：所有行都会显示边框；
• 当tbody里只有1个.compDetails-row：边框会被移除，完全符合你的需求。

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