使用Sass或CSS选择空元素的父级

Question

我尝试了几种组合来尝试选择父行，但似乎没有任何效果。也许是不可能的。如果有人可以帮助解释如何通过css或sass实现此目标，将不胜感激。

目标是在行中添加灰色背景（如果该行包含空列）。

我尝试了以下几种变化：

tr > td:empty {
  background-color: #f3f3f3;
}

示例

<table>
   <thead></thead>
   <tbody>
        <tr>
        <td>No</td>
        <td>empty</td>
        <td>cells</td>
        <td>here</td>
    </tr>
    <tr>
        <td>Does</td>
        <td>have</td>
        <td>empty</td>
        <td>cell</td>
        <td></td>
    </tr>
   </tbody>
   <tfoot></tfoot>
</table>

Answer 1

There is not such selector可以做到这一点，但是您可以使用伪元素来模拟效果：

table {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

tr>td:empty {
  position: relative;
}

tr>td:empty::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -50vw;
  right: -50vw;
  bottom: 0;
  background-color: #f3f3f3;
}

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>No</td>
      <td>empty</td>
      <td>cells</td>
      <td>here</td>
    </tr>
    <tr>
      <td>Does</td>
      <td>have</td>
      <td>empty</td>
      <td>cell</td>
      <td></td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>
<table>
  <thead></thead>
  <tbody>
    <tr>
      <td></td>
      <td>empty</td>
      <td>cells</td>
      <td></td>
      <td>here</td>
    </tr>
    <tr>
      <td>Does</td>
      <td>have</td>
      <td></td>
      <td>empty</td>
      <td>cell</td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>