仅使用 CSS 隐藏元素但不嵌套子项[重复]答案

【问题标题】：hide element but not nested child with css only [duplicate]仅使用 CSS 隐藏元素但不嵌套子项[重复]
【发布时间】：2018-08-20 06:43:19
【问题描述】：

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

【问题讨论】：

【解决方案1】：

你可以使用font-size吗？

.test {
  font-size: 0;
}

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

&lt;p class="test"&gt;hide me &lt;a&gt;show me&lt;/a&gt;&lt;/p&gt;

【讨论】：

【解决方案2】：

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

.test {可见性：隐藏；}
a {可见性：可见；}

【讨论】：