Css-problem: font-size

I have a css-problem I really don't seem to understand :) I have been styling css for three years now, but I've never had this problem.

I have declared some styles in my css-file that should apply for the content of my page. This is generally the right css, but there are some exceptions, like the page_child_title. I was under the impression that if I declared a style further in my css for specific classes, these would override earlier css-declarations. well now, in this case, it is not true. When I inspect with firebug, it seems that my browser really wants to use the font-size-css of ".page a" instead of using the ".page_child_title" (and I for one do not agree with my browser). The color of ".page_child_title" is applied correctly however. Below you can find the Html and css I'm talking about.

Html

<div id="page" class="page Jobs">
    <div class="p开发者_如何转开发age_child">
        <a class="page_child_title" ...

Style.css

.page p, .page ul, .page a {
    font-size: 10px;
    text-align: justify;
}
style.css (line 208)


.page_child_title {
    color: #006633;
    font-size: 12px;
}
style.css (line 262)

I have already tried replacing ".page_child_title" with ".Jobs a" but this didn't work. Then I tried declaring ".page_child_title" before ".page a", same result, so now I'm kind of stuck. Does anyone know what could be causing this problem?

---

.page a is a more specific selector. Therefore its settings will be used.

This phenomenon is called css specificity:

http://css-tricks.com/855-specifics-on-css-specificity/

a.page_child_title { ... } would work.

---

It would seem to me that selecting an element by its type rather than classname would be more specific.

Try changing .page_child_title to a.page_child_title

Example.

---

There are two solutions,

1. http://jsfiddle.net/ErsS4/

Change page_child_title to

a.page_child_title

Or

1. http://jsfiddle.net/m5V8f/

This meathod is a direct statment to the element.

Hope this helps!

---

An easy fix should be to change your style to

a.page_child_title

I believe it has something to do with the hierarchy of css and declaring the style of a itself.