为什么不能覆盖现有的伪元素？ [英] Why can't I override existing pseudo-elements?

问题描述

我有两个彼此遵循的CSS规则：

I have two CSS rules following each other:

.some td:first-child:before {
    content:url('path/to/image.png')" " ;
}
.some .other:before {
    content:url('path/to/image2.png')" " ;
}

以下是HTML片段：

<table class="some">
<tr>
    <td class="other">Text goes here</td>
    <td>Some more text.</td>
</tr>
</table>

它们都应该应用于同一个表格单元格。没有类的一个意思是作为后备。但是由于某种原因，它总是选择第二个规则。

They're both supposed to be applied to the same table cell. The one without the class is meant as a fallback. But for some reason, it's always choosing the first rule over the second. I know the 2nd one works, since it will be used if i disable the first one in Firebug.

我在这里失踪了什么？

推荐答案

确定，在一些 阅读，这是具体：

Ok, to put this straight, after some reading, this is the specificity:

• ID： 100


• 10
  
• 伪类别： 10


• >元素： 1


• 元素： 1

• Id: 100
• classes: 10
• pseudo-classes: 10
• pseudo-elements: 1
• elements: 1

这样，第一个选择器的特异性为22，第二个选择器只有21个。显然 first-child 似乎是一个伪

So that makes the first selector have a specificity of 22, and the 2nd of just 21. Apparently first-child seems to be a pseudo-class and not a pseudo-element.

最后，在之前添加 td 。其他会执行该操作，因为文档顺序优先。

Finally, adding a td before .other does the trick, since then document order takes precedence.

这篇关于为什么不能覆盖现有的伪元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！