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) 具有优先级，因为它更具体

Answer 2

您可以使用 !important 来防止覆盖样式

示例：

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

在上面的示例中，将应用 important 版本。

Answer 3

CSS 遵循特异性规则，这意味着如果您有两个可能同时适用的类，则会对它们进行权衡并应用更具体的一个。请参阅这篇优秀文章以获得更深入的解释：

http://htmldog.com/guides/cssadvanced/特异性/

在您的情况下，#menu_pages li a 的特异性为 102（id 选择器为 100，2 个 html 元素选择器为 1+1），而 a.edit< /code> 的特异性仅为 11（类选择器为 10，html 选择器为 1）。要么降低第一个的特异性，要么增加第二个的特异性，以达到您想要的效果。

此外，您可以在任何想要覆盖具有更高特异性的规则的规则末尾使用 !important。请注意，这必须单独应用于每种样式。

Answer 4

因为更具体，或者有一个更长的选择器 (#menu_pages li a) 会覆盖简单的 .edit 选择器。