为什么我不能覆盖现有的伪
我有两个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中禁用第一个，它将被使用。
我在这里错过了什么？
好吧，直接读一读，这是特殊性：
所以这使得第一个选择符的特异性为22，而第二个选择符只有21。显然， first-child似乎是伪类而不是伪元素。
最后，在.other之前添加一个td就.other实现，因为文档顺序优先。
我很确定这是与特定性有关的。 尝试添加!important的第二条规则，看看是否有效。
第一个规则比第二个规则更具体，所以在两个选择器都有效的情况下，更具体的覆盖其他规则。
阅读这篇文章，了解我们如何才能克服这种冲突风格的复杂性。 为了向他们介绍，下面是如何计算特异性。
+--------------------+--------------------+-----------------------------------+
| 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; } |
+--------------------+--------------------+-----------------------------------+
基本上，类选择器比标记选择器更具体。 让我们来计算你的特异性
第一条规则获胜。
你可以增加第二条规则的特殊性
.some tr td.other:before {
content:url('path/to/image2.png') ;
}
它的计算为33，覆盖风格的第一条规则。
链接地址: http://www.djcxy.com/p/70581.html