html - 在 ' 元素上使用 :before 伪元素 - 可以吗？

Question

我有兴趣看看是否可以在包裹:before元素上使用伪元素？<a href<button>

目前，Firefox 在元素后面显示一条细蓝线<button>- 这是因为它被包裹在<a href.

如果我在该行中使用内联样式，则<a href该行消失：

<a href="#" style="text-decoration:none;"><button>

但是，由于我<button>在多个页面上都有元素，因此如果可能的话，我想使用CSS来定位它们（​​而且我并不特别想去为网站上所有<a href包装<button>'s 的内容添加一个类）。这是我认为:before伪元素会派上用场但它似乎不起作用的地方：

a:before button{
    text-decoration:none !important;
}

这就是<button>Firefox 在 Firefox 中的显示方式，请参阅应用于<a href. 它只显示在右侧的原因是因为一个类margin-left:5px应用于<button>元素：

这是 jsfiddle 上按钮的基本版本（忽略轻微的外观差异）：http: //jsfiddle.net/Vtjue/2/

有任何想法吗？

Answer 1

:before和选择器指的:after是与 DOM 分开存在并由浏览器动态呈现的生成元素。这意味着您不使用它们来遍历您的 HTML 结构。

由于 CSS 选择器的性质，您不能选择a包含 a 的button，只能选择相反的方式（button包含 by a）。恐怕您唯一的选择是使用一个类，或者将您button的 s 从您的位置移开，a因为它们在语义上不属于那里。