CSS 保留父规则而不是类

Question

在这种情况下:

<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;

                }

.edit 类应该有自己的规则集(在 .page_content_actions 内)，但 .edit 只是获取背景，其余的来自一般 #menu_pages li a。这是为什么？

Answer 1

CSS 尝试选择元素的最具体定义

例如

1.

div span {
    background: yellow
}

2.

div div span {
    background: red
}

(2) 优先，因为它更具体