css - 隐藏元素中的文本节点，但不隐藏子节点

Question

我在使用 CSS 时遇到了一点问题，似乎找不到解决方案。我有这个 HTML

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

现在我只想隐藏文本«Click to close»，既不隐藏 div，也不隐藏其中的链接。

这可以做到吗？

score 107 · Accepted Answer

可以在子元素上覆盖该visibility属性，因此您可以这样做：

#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

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

score 27 · Accepted Answer

27

.closelink {
  font-size: 0px;
}

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

于 2015-07-24T09:27:25.837 回答

score 4 · Accepted Answer

尝试

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

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

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

score 3 · Accepted Answer

3

它有效，但您可以使用visibility:hidden而不是visibility:collapse

于 2013-07-09T14:46:00.110 回答

score 3 · Accepted Answer

为了避免子元素换行（就像使用visibility: hidden/collapseand发生的那样visibility: visible），并避免在浏览器中绘制 9999px 块（通常不赞成，因为它是不必要的开销），试试这个：

#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>

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

score 0 · Accepted Answer

我能想到的方法有以下三种：

一

#parent {
  opacity: 1;
}

.child {
  opacity: 0;
}

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

二

.child {
  visibility: hidden;
}

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

三

.child {
  display: none;
}

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

如果您希望图像始终在页面上以保持结构，但不希望它可见，则不透明度是最好的。希望这会有所帮助。

6 回答 6