css 隐藏文本节点但显示其子节点答案

【问题标题】：css hide text node but show its childrencss 隐藏文本节点但显示其子节点
【发布时间】：2016-12-18 10:50:29
【问题描述】：

我有如下的 html 和 css 选择器。我想隐藏文本节点但留下它的孩子。 IE。文本节点“仪表板”

<li>
    <a href="#">
        <span class="icon">
          <i class="fa fa-home"></i>
        </span>
        Dashboard  
    </a>
</li>

css

li > a > :not(span){
  display: none;
}

【问题讨论】：

您不能使用 CSS 执行此操作，因为 CSS 应用于元素。您不能将其应用于文本节点。

标签： css sass

【解决方案1】：

这是一个纯 CSS 示例，使用 text-indent 隐藏文本但保持内部元素可见。这根本不需要您修改 HTML。

/* icon styles just for example: */

.icon {
  background: green;
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

/* hiding happens here: */

a {
  display: block;
  position: relative;
  text-indent: -9999px;
}

a > * {
  position: absolute;
  top: 0;
  left: 0;
  text-indent: 0;
}

<ul>
  <li>
    <a href="#">
      <span class="icon"><i class="fa fa-home"></i></span>
      Dashboard
    </a>
  </li>
</ul>

【讨论】：

【解决方案2】：

CSS 选择器只能选择元素（或伪元素），不能选择连续的文本。

但如果您想要display: none 之类的东西，您可以使用font-size: 0，并在子元素上恢复所需的值。

@import 'http://fontawesome.io/assets/font-awesome/css/font-awesome.css';
li > a {
  font-size: 0;
}
li > a > * {
  font-size: 1rem;
}

<li>
  <a href="#">
    <span class="icon">
      <i class="fa fa-home"></i>
    </span>
    Dashboard  
  </a>
</li>

还有visibility: hidden，它会隐藏文本但后面的内容不会移动以占用释放的空间。

@import 'http://fontawesome.io/assets/font-awesome/css/font-awesome.css';
li > a {
  visibility: hidden;
}
li > a > * {
  visibility: visible;
}

<li>
  <a href="#">
    <span class="icon">
      <i class="fa fa-home"></i>
    </span>
    Dashboard  
  </a>
  Following text
</li>

【讨论】：

AFAIK 以这种方式使用通用选择器在性能方面可能会很昂贵，还是不再是问题？
@Aziz 我确信浏览器可以毫无问题地处理它。但如果知道只能有span 孩子，li > a > span 可能会更快，是的。

【解决方案3】：

CSS 无法访问杂散文本节点，理想的解决方案是将文本包装在 <span> 中，并使用特定的隐藏类，例如：

<span class="link-text">Dashboard</span>

然后用 CSS 隐藏：

li > a > .link-text {
  display: none;
}

但是，如果您无法修改 HTML，您可以尝试另一种技术，使用overflow: hidden“剪辑”文本，同时为您的容器/链接添加固定高度/宽度：

li > a {
  width: 20px;
  height: 20px;
  overflow: hidden;
  display: block;
}

【讨论】：