Why does element style override class that is set on element?

Our problem is like this. We have piece of code like this.

<div class="parent">
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 1</a>
    </div>
    <div class="child">
        <a href=开发者_开发知识库"#" class="child_item" onclick="return false;" onfocus="blur();">Item 2</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 3</a>
    </div>
    <div class="child">
        <a href="#" class="child_item" onclick="return false;" onfocus="blur();">Item 4</a>
    </div>
    <div class="clear">
    </div>
</div>

This is all in global container with class .content.

CSS code:

.content a
{
    font-size: 11px;
}

.parent a
{
    font-size: 16px;
}

For some reason, instead of applying .parent a, browsers are applying .content a.

What is wrong and how come container CSS is applied instead of closer .parent a CSS?

---

Both rules have the same specificity, so whichever rule comes last in the style declarations will win... Are you sure that the .parent a-rule is specified after the .content a-rule?

Another way to solve it would be to increase the specificity slightly, i.e:

.parent .child_item { font-size: 16px; }

Edit: You can play around with your test case here: http://jsfiddle.net/gburw/ To prove my point, try switching the CSS-declarations and you will see that whichever rule is defined last will "win".

Edit 2: You can read more about CSS specificity here. It's a pretty simple concept to grasp, the hard part is avoiding specificity wars with fellow developers =) So you should come up with a standard way you write CSS in your company. Following the guidelines of Pagespeed and YSlow is also always a good idea.

---

Or if you really want .parent a to be applied. You can do this:

.parent a{
   font-size:16px !important;
}

that will give it more weight than .content a regardless of which was declared last.

---

Sounds like an issue of CSS Specificity. Check to make sure that your CSS selectors are actually:

.content a
{
    font-size: 11px;
}

.parent a
{
    font-size: 16px;
}

and not someting like #container .content a. You could also increase the specificity of .parent a to .parent .child a if that's not the case.