Question

我有两个CSS规则相互跟随：

.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>

它们都应该应用于同一个表格单元格。没有班级的那个人意味着后备。但出于某种原因，它总是在第二条规则上选择第一条规则。我知道第二个可以工作，因为如果我在Firebug中禁用第一个，它将被使用。

我在这里缺少什么？

Answer 1

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

Id： 100
课程： 10
pseudo- 类： 10
pseudo- 元素： 1
元素： 1

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

最后，在td之前添加.other可以解决问题，因为此时文档顺序优先。

Answer 2

第一条规则比第二条规则更具体，因此在两个选择器都有效的情况下，更具体的规则会覆盖其他规则。

阅读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，以覆盖样式优先规则。

Answer 3

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

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

3 个答案: