Question

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

我想用纯CSS来隐藏文字＆＃34; AAA＆＃34;显示跨度btn。有没有办法在纯CSS中做到这一点？

Answer 1

如果你的设计没有真正的响应，我的意思是你只需要为内部span设置固定的字体大小，我想我们有一个像这样的干净解决方案。我们的想法是将font-size的{{1}}设置为td，它会完全隐藏文本节点：

Demo.

Answer 2

您可以使用visibility属性，但这会保留文本“AAA”的空间：

.col {    
    visibility:hidden;
}

.clear-icon {
    visibility:visible;
}

另外，如果您无法从display:block !important;代码中删除td，只需在CSS中添加!important规则

.col {
    display:block !important;
    visibility:hidden;
}

Answer 3

请参阅this fiddle

<table>
    <td class="col">AAA <span>Show Me</span>
    </td>
</table

.col {
    visibility:hidden;
}
.col span {
    visibility:visible;
}

Answer 4

http://jsfiddle.net/vLNEp/4/

<table><tr><td class="col"><span class="hidden">AAA</span>
      <span prop="1" class="clear-icon"></span>
</td></tr></table>

.col .hidden {position:absolute;top: -9999px; left: -9999px;}

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

4 个答案:

Demo.