Why can't I override existing pseudo
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')" " ;
}
Here's the HTML snippet:
<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.
What am I missing here?
Ok, to put this straight, after some reading, this is the specificity:
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.
Finally, adding a td
before .other
does the trick, since then document order takes precedence.
I'm pretty sure it's to do with the specificity. Try adding !important
to the second rule and see if that works.
The first rule is more specific than the second one, so in a case when both the selectors are valid, the more specific one overrides other.
Read this article to know how can we overcome such complications of having conflicting styles. To brief them, Here is how specificity are calculated.
+--------------------+--------------------+-----------------------------------+
| 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; } |
+--------------------+--------------------+-----------------------------------+
Basically, Class Selectors are more specific than tag selectors. Lets calculate your specificity
SO the first rule wins.
You can increase the specificity of the second rule like
.some tr td.other:before {
content:url('path/to/image2.png') ;
}
Its calculate to 33, to override the style first rule.
链接地址: http://www.djcxy.com/p/70582.html下一篇: 为什么我不能覆盖现有的伪