CSS 如何使用纯css选择器选择隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23480874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use pure css selector to select hidden element
提问by 9blue
<td class="col" style="display:none">AAA
<span prop="1" class=" clear-icon " style=""></span>
</td>
I want to use pure css to hide text "AAA" to show span btn. Is there a way to do it in pure css?
我想使用纯 css 隐藏文本“AAA”以显示跨度 btn。有没有办法在纯 css 中做到这一点？
回答by King King
If your design is not really responsive, I mean you can just need to set fixed font-size for the inner span, I think we have a clean solution like this. The idea is to set font-sizeof the tdto 0, it will hide the text node completely:
如果您的设计不是真正的响应式，我的意思是您只需为内部设置固定字体大小span，我认为我们有这样一个干净的解决方案。这个想法是一套font-size的td来0，它会完全隐藏文本节点：
.col[style*="display:none"] {
display:table-cell!important;
font-size:0;
}
.col > span {
font-size:20px;
}
Demo.
演示。
回答by Artem Petrosian
You can use visibilityproperty but this will reserve the space for text "AAA":
您可以使用visibility属性，但这将为文本“AAA”保留空间：
.col {
visibility:hidden;
}
.clear-icon {
visibility:visible;
}
Also, if you can't remove display:block !important;from your tdtag just add !importantrule in CSS
此外，如果您无法display:block !important;从td标签中删除，只需!important在 CSS 中添加规则
.col {
display:block !important;
visibility:hidden;
}
回答by Chris L
see this fiddle
看到这个小提琴
<table>
<td class="col">AAA <span>Show Me</span>
</td>
</table
.col {
visibility:hidden;
}
.col span {
visibility:visible;
}
回答by JohanVdR
<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;}
