I have the following HTML:
<div class="form-square">
<div class="seven-col">
Hello World!
</div>
</div>
And the following CSS:
div.form-square > div {
padding: 50px;
}
.seven-col {
padding: 0;
}
Firefox and Firebug is using the first of the two CSS rules. How come "div.form-square > div" has higher precedence than ".seven-col" which is more specific?
See Question&Answers more detail:os