隐藏元素但不包含仅使用css的嵌套子元素

Question

我在AMP-Page中有类似的东西(我不能改变结构,!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>