能否在:not伪选择器中使用相邻兄弟组合器？附表格样式需求

你的需求是：当表格包含tfoot时，移除tbody最后一行td的border-radius，但原CSS的选择器逻辑完全相反，所以无法实现预期效果。

原代码问题点 #

table tbody:not(+ tfoot) tr td 这个选择器的意思是：选中后面没有紧跟tfoot的tbody下的所有tr的td，并把它们的border-radius设为0——这和你想要的“有tfoot时修改tbody最后一行”刚好相反。

正确解决方案 #

方案1：使用:has()伪类（现代浏览器推荐） #

利用:has()伪类选择包含tfoot的表格，再定位到tbody的最后一行td：

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: 1px solid;
  border-radius: 4px;
  background-color: red;
}

/* 关键代码：选中包含tfoot的表格，移除tbody最后一行td的圆角 */
table:has(tfoot) tbody tr:last-child td {
  border-radius: 0;
}

对应的HTML：

<!-- 有tfoot的表格，会生效 -->
<table>
  <tbody>
    <tr><td>Body cell</td></tr>
    <tr><td>Body cell</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Footer cell</td></tr>
  </tfoot>
</table>

<!-- 无tfoot的表格，保持原有圆角 -->
<table>
  <tbody>
    <tr><td>Body cell</td></tr>
    <tr><td>Body cell</td></tr>
  </tbody>
</table>

方案2：给表格加类名（兼容性更好） #

如果需要兼容不支持:has()的旧浏览器，可以给包含tfoot的表格手动添加类名（比如with-footer），再通过类选择器定位：

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: 1px solid;
  border-radius: 4px;
  background-color: red;
}

/* 关键代码：通过类名定位有tfoot的表格 */
table.with-footer tbody tr:last-child td {
  border-radius: 0;
}

对应的HTML：

<table class="with-footer">
  <tbody>
    <tr><td>Body cell</td></tr>
    <tr><td>Body cell</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Footer cell</td></tr>
  </tfoot>
</table>

补充说明 #

• tr:last-child 确保只选中tbody的最后一行，不会影响前面的行
• 两种方案都能精准实现需求，可根据浏览器兼容性要求选择

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