在元素中隐藏文本节点，但不隐藏子节点

小开

Try

#closelink {
position: relative;
left: -9999px;
}


#closelink a {
position: relative;
left: 9999px;
}

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

小开

最佳答案

The visibility attribute can be overriden on children elements, so you are able to do this:

#closelink {
visibility: collapse;
}


#closelink a {
visibility: visible;
}

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

小开

It works but you can use visibility:hidden instead of visibility:collapse

小开

To avoid the child element breaking to a new line (as happens with just using visibility: hidden/collapse and visibility: visible), and to avoid drawing a 9999px block in the browser (generally frowned upon as it is unnecessary overhead), try this:

#closelink {
position: relative;
visibility: hidden;
}


#closelink a {
position: absolute;
left: 0;
top: 0;
visibility: visible;
}

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

You can adjust your left: 0 value to provide some padding.

小开

There are three methods I could think of:

One

#parent {
opacity: 1;
}


.child {
opacity: 0;
}

<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>

Two

.child {
visibility: hidden;
}

<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>

Three

.child {
display: none;
}

<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>

Opacity is best if you want the image to always be on the page to keep the structure but, you don't want it to be visible. Hope this was helpful.

小开

.closelink {
font-size: 0px;
}


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