Html 使用CSS有条件地隐藏最后一行

但这不起作用，因为有时最后一行是部分填充的，我不想隐藏它

---

不确定使用纯CSS选择器是否可行。

可以使用javascript

let rows=document.querySelectorAll（'.row'）；
rows.forEach（（row）=>{
设cols=row.querySelectorAll（'td'）；
设colsB=row.querySelectorAll（'td.B'）；
if（cols.length==colsB.length）{
row.style=“显示：无；”；
}
})

A.
A.
B
B
B
B

CSS代表级联样式表，因此无法设置父节点的样式。 但即将推出的CSS4可能会附带带有：has（）伪类的解决方案，因此您的代码可能如下所示：

  tbody {
    tr:last-child {
      display: none;
    }
  }

---

如果最后一个中的第一个具有B类，则整行将不显示

这是未来，现在您可以使用JS或服务器端解决方案。

因为我使用React，所以我试图避免使用Javascript来操纵dom元素。我发现了一种使用CSS的方法

tr:last-child:has( :first-child.B ){ 
    display : none;
}

• 首先，我选择最后一行

  tr:last child

  ，然后

• td:first child.B

  在最后一行中，将不显示包含

  B

  类的第一个子级

• td:first child.B~td

  在同一最后一行中，不显示包含B类的第一个子级的同级

---

我会尝试使用jquery，因为它比使用css简单得多。单靠css是做不到的。您将需要一些JavaScript。@TimGerhard我正在使用react with external party library，所以我只尝试使用CSS：）@MohammadUsman我的要求很简单，CSS可以处理这种情况：）

tr:last-child:has( :first-child.B ){ 
    display : none;
}

tbody {
    tr:last-child {
      td:first-child.B {
        display:none;
      }
      td:first-child.B ~ td  {
          display:none;
      }
    }
  }