css - 如何使用纯css选择器选择隐藏元素

Question

<td class="col" style="display:none">AAA
      <span prop="1" class=" clear-icon " style=""></span>
</td>

我想使用纯 css 隐藏文本“AAA”以显示 span btn。 有没有办法在纯 css 中做到这一点？

Answer 1

如果您的设计不是真正的响应式设计，我的意思是您只需为内部 span 设置固定的字体大小，我认为我们有这样一个干净的解决方案。思路是将td的font-size设置为0，这样会完全隐藏文本节点:

.col[style*="display:none"] {
  display:table-cell!important;
  font-size:0;
}
.col > span {
  font-size:20px;
}

Demo.