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/specificity/

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

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

Answer 4

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

CSS保留父规则而不是类

4 个答案: