仅隐藏元素但不隐藏 css 的嵌套子元素

Question

我在 AMP 页面中有类似的东西（我无法更改给定的结构，!important 不可能用于 AMP）：

<p class="test">hide me <a>show me</a></p>

如何隐藏父机器人的 html 而不是嵌套的 a-tag？ 我尝试了这个但没有成功：

.test{display:none;}
.test a{display:block;}

还有：

.test:not(a){display:none;}

Answer 1

您可以使用 font-size?

.test {
  font-size: 0;
}

.test a {
  font-size: 16px;
}

<p class="test">hide me <a>show me</a></p>

Answer 2

使用隐藏和可见属性是可能的。

.test {可见性：隐藏；}
{能见度：可见；}