隐藏元素中的文本节点，但不包含子元素

我对CSS有点麻烦，似乎无法find解决scheme。 我有这个HTML 

<div id="closelink"> <a href="">Close</a> Click to close </div>

现在我想只隐藏文本«点击closures»，而不隐藏任何div，也不在其中。

可以这样做吗？

visibility属性可以在子元素上被覆盖，所以你可以这样做： 

 <div id="closelink"> <a href="">Close</a> Click to close </div>

CSS： 

 #closelink { visibility:collapse; } #closelink a{ visibility:visible; }

结果是这样的： http : //jsfiddle.net/pavloschris/Vva84/ 

 .closelink { font-size: 0px; } .close-link a { font-size: 12px; }

尝试 

 <div id="closelink"> <a href="">Close</a> Click to close </div> #closelink { position: relative; left: -9999px; } #closelink a { position: relative; left: 9999px; }

它的作品，但你可以使用visibility:hidden而不是visibility:collapse

为了避免子元素突破新线（就像使用visibility：hidden / collapse;和visibility：visible一样），并且为了避免在浏览器中绘制一个9999px的块（通常被忽视，因为它是不必要的开销），尝试这个： 

 <div id="closelink"> <a href="">Close</a> Click to close </div> #closelink { position: relative; visibility: hidden; } #closelink a { position: absolute; left: 0; top: 0; visibility: visible; }

你可以调整你的left: 0值来提供一些填充。

有三种方法我可以想到：

一 

  <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #parent{ opacity: 1; } .child{ opacity: 0; } </style> </head> <body> <div id="parent"> dkjfdkf <span class="child">Annoying text</span> </div> </body> </html>

二 

  <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #parent{ } .child{ visibility: hidden; } </style> </head> <body> <div id="parent"> dkjfdkf <span class="child">Annoying text</span> </div> </body> </html>

三 

  <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #parent{ } .child{ display: none; } </style> </head> <body> <div id="parent"> dkjfdkf <span class="child">Annoying text</span> </div> </body> </html>

不透明度是最好的，如果你想图像总是在页面上保持结构，但是，你不希望它是可见的。 希望这是有帮助的。

Interesting Posts