Question

这是我拥有的html的一个例子

<tbody class="list-item" style="">
<tr class="table-data">
    <td class="data">
      <span><a href="/example/100">data1</a></span>
    </td>
</tr>
</tbody>

<tbody class="list-item" style="">
<tr class="table-data">
    <td class="data">

    </td>
</tr>
</tbody>

如您所见，第二个数据类为空。我需要选择空元素并隐藏它。

我会使用：empty选择器，但我在html中有空格。我无法编辑html或使用javascript，只有css。

我尝试了很多东西，但我无法绕过它。有人可以帮我吗？凌乱的黑客/解决方法会没问题。

编辑：这是与之相关的CSS（对不起，我忘了这很重要）

[class='data'] {
font-size: 0;
display: block;
opacity: 0;
position: fixed;
width: 226px;
left: 100px;
bottom: 100px;
background-color: rgba(34,34,34,0.8);
border: 1px solid #333;
border-top: 0 !important;
transition: opacity 0.15s linear;
}

[class='data'] a {
color: #fff;
display: inline-block;
font-size: 9px;
height: 15px;
line-height: 15px;
margin-top: -1.5px;
max-width: 220px;
padding: 0 10px;
white-space: nowrap;
}

tr:hover [class='data'] {
background-color: rgba(34,34,34,0.8);
opacity: 1;
transition: 0.15s linear;
}

Answer 1

for select not span in all of document using：

:not(span) {
    color: #ff0000;
}

如果要选择td标签中没有span的元素，请使用：

td:not(span) {
    color: #ff0000;
}

Answer 2

CSS中有一个名为empty-cells: hide;的属性，即使有空格也会隐藏空td。

<style>
table {
border-collapse: separate;
empty-cells: hide;
      } 
</style>

请参阅此链接以获取更多信息Link

Answer 3

尝试下面的css，它会找到空的td单元格并隐藏它

＆＃13;

.list-item>.table-data {
    border-collapse: separate;
    empty-cells: hide;
}

＆＃13;

<table border="1">
  <tbody class="list-item" style="">
    <tr class="table-data">
      <td class="data">
        <span><a href="/example/100">data1</a></span>
      </td>
    </tr>
    <tr class="table-data">
      <td class="data">

      </td>
    </tr>
  </tbody>
</table>

＆＃13;

CSS选择没有span的所有元素

3 个答案: