Question

我定位的是具有结构

的网页

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

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

Answer 1

使用 visibility 属性

隐藏元素的文本节点内容的一种方法是在父visibility: hidden上设置div，然后为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>

如何定位文本节点？

1 个答案: