Question

我有html和css选择器如下。我想隐藏文本节点但是留下它的孩子。即。文本节点＆＃34;仪表板＆＃34;

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

CSS

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

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

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

Answer 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;
}

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

3 个答案: