Question

使用CSS，我如何选择文本This Text。我希望删除/隐藏它。

我无法改变HTML本身，只能更改CSS。

<h2 class="hello">
      This Text
     <span class="mark">05/03/2017 3:29 PM EDT</span>
 </h2>

Answer 1

如果您打算隐藏文字，请执行以下操作

＆＃13;

.hello {
  font-size: 0;
}

.mark {
  font-size: 30px;
}

＆＃13;

<h2 class="hello">
      This Text
     <span class="mark">05/03/2017 3:29 PM EDT</span>
 </h2>

＆＃13;

Answer 2

这是另一个想法，使用visibility，它不会覆盖在其他地方应用的任何font-size样式。

此方法的轻微潜在缺点是它将.hello更改为相对定位，这可能会覆盖您应用于它的某些布局。

我认为这不如覆盖字体大小。

.hello {
    visibility: hidden;
    position: relative;
}

.hello .mark {
    visibility: visible;
    position: absolute;
    left: 0;
}

<h2 class="hello">
    This Text
    <span class="mark">05/03/2017 3:29 PM EDT</span>
</h2>

Answer 3

我能想到的唯一方法是在隐藏外部div后覆盖span内部。像这样：

.hello .mark {
  visibility: visible;
}

.hello {
  visibility: hidden;
}

<h2 class="hello">
  This Text
  <span class="mark">05/03/2017 3:29 PM EDT</span>
</h2>

Answer 4

font-size: 0或visibility: hidden都可用于隐藏＆＃34;父母。

结合这些方法将带来很多好处：

visibility: hidden以一种在选中时无法复制到剪贴板的方式隐藏文本。
font-size: 0会处理操作可见性后剩余的空间。这也可以通过使父母相对定位并且孩子绝对+ top: 0来解决。然而，搞乱定位可能会导致问题 - 迟早。
无论如何定义字体大小都是个不错的主意。

＆＃13;

.hello {
  visibility: hidden;
  font-size: 0;
}
.mark {
  visibility: visible;
  font-size: 1.5rem;
}

＆＃13;

<h2 class="hello">
  This Text
  <span class="mark">05/03/2017 3:29 PM EDT</span>
</h2>

＆＃13;