使用Sass或CSS选择空元素的父级 [英] Select parent of empty elements using Sass or CSS

问题描述

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

I've tried several combinations to try and select a parent row but nothing seems to work. Maybe it is not possible. If someone could help explain how to achieve this through either css or sass it would be much appreciated.

目标是在行中添加灰色背景，如果那样的话行包含一个空列。

The goal is to add a gray background to a row, , if that row contains an empty column, .

我尝试了以下几种变化：

I've tried some variations of the following:

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>

推荐答案

没有这样的选择器可以做到这一点，但是您可以使用伪元素来模拟效果：

There is not such selector to do this but you can simulate the effect using a pseudo element:

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>

这篇关于使用Sass或CSS选择空元素的父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！