Html 如何删除元素中的文本但显示其子元素

我目前正在制作一个自定义网站CSS，但遇到了一个我在网上找不到的问题。我试图删除a

span

的值，但显示了其中的元素，在本例中是

a

。 示例中期望的结果是单词

Foo&
条不带
-

<style>
    span
    {display: none;}
    span a
    {display: block}
</style>

<span>
    - <a href="#">Foo!</a>
    - <a href="#">Bar!</a>
</span>


跨度
{显示：无；}
跨度a
{显示：块}
- 
- 

这不起作用，很明显，但显示了我的尝试（它将删除所有内容）


跨度：不是（a）
{显示：无；}
- 
- 

我的第二次尝试也没有成功，但我想不出更多。（也会删除所有内容）。
移除
a
不是问题，但另一种方法似乎很困难。我是愚蠢还是在尝试一些不可能的事情

它是为
Firefox
构建的，因此任何
Firefox
专用解决方案都可以

提前感谢。
最简单的方法是：


span{
字号：0；
}
跨度a{
字体大小：16px；
}

- 
- 
最简单的方法是：


span{
字号：0；
}
跨度a{
字体大小：16px；
}

- 
- 
最简单的方法是：


span{
字号：0；
}
跨度a{
字体大小：16px；
}

- 
- 
最简单的方法是：


span{
字号：0；
}
跨度a{
字体大小：16px；
}

- 
- 
啊，非常感谢！我已经有一段时间没有接触CSS了。不客气，我很高兴能帮上忙！：）最终我无法调用
span a
，我不得不调用
span a:n个孩子（1n+1）
来平衡
-
字符。但是我从来没有想过要降低字体大小。啊，非常感谢！我已经有一段时间没有接触CSS了。不客气，我很高兴能帮上忙！：）最终我无法调用
span a
，我不得不调用
span a:n个孩子（1n+1）
来平衡
-
字符。但是我从来没有想过要降低字体大小。啊，非常感谢！我已经有一段时间没有接触CSS了。不客气，我很高兴能帮上忙！：）最终我无法调用
span a
，我不得不调用
span a:n个孩子（1n+1）
来平衡
-
字符。但是我从来没有想过要降低字体大小。啊，非常感谢！我已经有一段时间没有接触CSS了。不客气，我很高兴能帮上忙！：）最终我无法调用
span a
，我不得不调用
span a:n个孩子（1n+1）
来平衡
-
字符。但我从未想过要降低字体大小。
<style>
    span:not(a)
    {display: none;}
</style>

<span>
    - <a href="#">Foo!</a>
    - <a href="#">Bar!</a>
</span>