为什么我不能覆盖现有的伪元素？答案

【问题标题】：Why can't I override existing pseudo-elements?为什么我不能覆盖现有的伪元素？
【发布时间】：2012-04-20 19:20:05
【问题描述】：

我有两个相互遵循的 CSS 规则：

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

这是 HTML sn-p：

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

它们都应该应用于同一个表格单元格。没有类的那个是一个后备。但出于某种原因，它总是选择第一条规则而不是第二条规则。我知道第二个有效，因为如果我在 Firebug 中禁用第一个，它将使用它。

我在这里错过了什么？

【问题讨论】：

.some td.other:before 不起作用吗？
第一个比另一个有more specificity。
@JohnH：问题在于，“其他”会有所不同，如果没有针对特定类的明确规则，则应该使用后备规则。
@JaredFarrish：为什么？第二个有两个类选择器，第一个只有一个。如果匹配，它不应该使用那个代替吗？
第一个看起来是 31（三个二级选择器加上一个元素选择器），第二个是 30（三个二级选择器，没有元素选择器）。看看怎么calculate your selector specificity。

标签： css pseudo-element css-specificity

【解决方案1】：

第一个规则比第二个规则更具体，所以在两个选择器都有效的情况下，更具体的一个会覆盖另一个。

阅读this 文章，了解我们如何克服风格冲突带来的复杂情况。简要介绍一下，这是计算特异性的方法。

+--------------------+--------------------+-----------------------------------+
|    Type            |   Specific Value   |  Example                          |
+--------------------+--------------------+-----------------------------------+
|  Inline Style      |   1000             | style="color: #f00;"              |
+--------------------+--------------------+-----------------------------------+
|  Id                |   100              | #text { color: #f00; }            |
+--------------------+--------------------+-----------------------------------+
|  Classes           |   10               | .text { color: #f00; }            |
+--------------------+--------------------+-----------------------------------+
|  Pseudo Classes    |   10               | a:hover { color: #f00; }          |
+--------------------+--------------------+-----------------------------------+
|  Pseudo Elements   |   10               | a:first-child { color: #f00; }    |
+--------------------+--------------------+-----------------------------------+
|  Elements (tag)    |   1                | a { color: #f00; }                |
+--------------------+--------------------+-----------------------------------+

基本上，类选择器比标签选择器更具体。让我们计算您的特异性

对于第一条规则：31
第二条规则：30

所以第一条规则获胜。

你可以像这样增加第二条规则的特异性

.some tr td.other:before {
    content:url('path/to/image2.png') ;
}

其计算为 33，以覆盖样式优先规则。

【讨论】：

问题是，它总是使用第一个，而不是第二个。
@DanMan，哎呀，我计算了特异性，你是对的，更新了答案。

【解决方案2】：

好吧，直截了当地说，在some reading之后，这就是特异性：

ID：100
类：10
伪类类：10
伪元素：1
元素：1

所以这使得第一个选择器的特异性为 22，而第二个只有 21。显然first-child 似乎是一个伪类而不是伪元素。

最后，在.other 之前添加td 就可以了，因为这样文档顺序优先。

【讨论】：

没错，是的，伪类就像一个类（在这种情况下，是一个将分配给所有第一个元素的类名），而伪元素是DOM中的一个新元素，在这种情况下，将插入相关元素之前。这有意义吗？
人们可以争论所有喜欢的人，但不，一个类不是一个元素。就像在您的示例中一样，some 不是元素，只有带有class="some" 的表是。即使您更改类名使其听起来像一个元素，class="theThirdTable"，它仍然不是一个元素！
见What is the difference between a pseudo-class and a pseudo-element in CSS?

【解决方案3】：

我很确定这与特异性有关。尝试将!important 添加到第二条规则中，看看是否可行。

【讨论】：

!important 是最后的手段，在其他一切都失败时使用。
同意警告。但在这种情况下，快速查看它是否可以被覆盖是一个不错的建议，回答它是否与特异性有关，而不必确定确切的原因。