css - 仅使用 CSS 隐藏元素但不嵌套子元素

Question

我在 AMP 页面中有类似的内容（我无法更改其给定的结构，并且 AMP 无法更改!important）：

<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 {可见性：隐藏；}
a {可见性：可见；}