如何定位文本节点？

Question

4

我正在针对一个具有以下结构的页面进行目标定位

<div class="x">
    <span>This should be visible</span>
    <span>This should be visible</span>
    This shouldn't be.
</div>

这不是我拥有的页面，因此我无法更改其结构或添加标签。我只能制作自定义样式表，只能使用CSS。

我的第一个想法是尝试

div.x { display: none; }
div.x span { display: inline; }

但是这似乎只是完全隐藏了整个元素。

- GreenTriangle

你只是想隐藏那些不应该被看到的内容吗？还是你还想对它做其他的事情？ - Harry

这是在标签内部还是作为纯文本？“这不应该出现在这里。” - T04435

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

使用 visibility 属性:

隐藏元素文本内容的一种方法是在父级 div 上设置 visibility: hidden，然后为 span 覆盖它。

使用 visibility: hidden 的缺点是，如果文本节点后面有其他元素，则会留下一个空白的空间（请参考下面的代码段）。

div.x {
  visibility: hidden;
}
div.x span {
  visibility: visible;
}

<div class="x">
  <span>This should be visible</span>
  <span>This should be visible</span>
  This shouldn't be.
  <span>Some other tag</span>
</div>

使用 font-size 属性：

另一种方法是为父级元素设置 font-size: 0px，然后为 span 元素覆盖该属性。

这种方法的缺点是你需要知道子元素的 font-size 大小。

div.x {
  font-size: 0px;
}
div.x span {
  font-size: 16px;
}

<div class="x">
  <span>This should be visible</span>
  <span>This should be visible</span>
  This shouldn't be.
  <span>Some other tag</span>
</div>

使用 color 属性：

另一种方法是为父元素设置color: transparent（正如Paran0a所指出的那样），然后覆盖span的颜色。

缺点是你需要知道子元素的颜色，并且文本将占用空间，因为它仍然存在，但颜色是透明的（参见下面的代码片段）。

div.x {
  color: transparent;
}
div.x span {
  color: black;
}

<div class="x">
  <span>This should be visible</span>
  <span>This should be visible</span>
  This shouldn't be.
  <span>Some other tag</span>
</div>