CSS keeping parent rules instead of class

in this situation:

<ul id="menu_pages">
                      <li class="menu_pages_title">
                        <div id="menu_pages_container">
                            <a href="#">AAA</a>
                            <div class="page_content">

                            <div class="page_content_actions">
                                    <a class="edit" href="#">BBB</a>
                            </div>
                                test 1
                            </div>
                        </div>
                    </li>

</ul>

ul#menu_pages li{
    margin-bottom: 10px;
}

    ul#menu_pages li a:link,ul#menu_pages li a:active,ul#menu_pages li a:visited{
        display:block;
        padding:5px;
        border:1px solid #C3D5DF;
        line-height:25px;
        font-size: 15px;
        font-weight: bold;
        color:#C3D5DF;

}

div.page_content_actions li a.edit:link, div.page_content_actions a.edit:active, div.page_content_actions a.edit:visited {
                    background: url('/site_images/page_edit.png') left no-repeat;
                    display:block;
                    padding:0;
     开发者_运维知识库               border:0;
                    font-size: 11px;
                    font-weight: bold;
                    color:#fff;

                }

the .edit class should get its own rules set (inside .page_content_actions) but instead from .edit is just getting the background, the rest is coming from the general #menu_pages li a. Why is that?

CSS tries to pick most specific definition of an element

e.g

1.

div span {
    background: yellow
}

2.

div div span {
    background: red
}

(2) has priority because its more specific

you can use the !important to prevent overriding of styles

Example:

<p class="foo bar">hello</p>
<style>
.foo
{
   font-size:20px;
}
.bar
{
   font-size: 5px !important;
}
</style>

in the above example the important version would be applied.

CSS follows specificity rules, which means that if you have two classes that might both apply, they are weighed out and the more specific one is applied. See this excellent article for a more in-depth explanation:

http://htmldog.com/guides/cssadvanced/specificity/

In your case, #menu_pages li a has a specificity of 102 (100 for an id selector and 1+1 for 2 html element selectors) while a.edit has a specificity of just 11 (10 for a class selector and 1 for an html selector). Either reduce the specificity of the first or increase the specificity of the second to achieve your desired effect.

Additionally, you could use !important at the end of any rule that you want to override another rule with higher specificity. Note that this must be applied to each style individually.

Because being more specific, or having a longer selector (#menu_pages li a) overides the simple .edit one.