9

我有两个相互遵循的 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 中禁用第一个，它将使用它。

我在这里想念什么？

4

3 回答 3

15

好的，直截了当地说，经过一番 阅读，这就是特异性：

  • 编号：100
  • 班级：10
  • 伪类：10
  • 伪元素：1
  • 元素：1

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

最后，添加一个tdbefore.other可以解决问题，因为那时文档顺序优先。

于 2012-04-07T16:44:00.857 回答
3

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

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

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

于 2012-04-07T16:11:46.737 回答
2

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

于 2012-04-07T16:05:56.407 回答