CSS保留父规则而不是类

在这种情况下：

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

                }

测试1


菜单页面{
边缘底部：10px；
}
ul#菜单#页面li a:链接，ul#菜单#页面li a:活动，ul#菜单#页面li a:已访问{
显示：块；
填充物：5px；
边框：1px实心#C3D5DF；
线高：25px；
字体大小：15px；
字体大小：粗体；
颜色：#C3D5DF；
}
div.page\u content\u actions li a.编辑：链接，div.page\u content\u actions a.编辑：活动，div.page\u content\u actions a.编辑：已访问{
背景：url（'/site\u images/page\u edit.png'）没有重复；
显示：块；
填充：0；
边界：0；
字体大小：11px；
字体大小：粗体；
颜色：#fff；
}

---

.edit类应该获得自己的规则集（在.page\u content\u actions中），而不是从.edit只是获取背景，其余的则来自于general#menu\u pages li a。为什么会这样？

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

e、 g

一,

二,

---

（2）具有优先权，因为其更具体的CSS遵循特定性规则，这意味着如果您有两个可能都适用的类，则会对它们进行权衡，并应用更具体的一个。有关更深入的解释，请参阅这篇优秀的文章：

在您的例子中，

#menu#pages li a

的特异性为102（对于id选择器为100，对于2个html元素选择器为1+1），而

a.edit

的特异性仅为11（对于类选择器为10，对于html选择器为1）。要么降低第一种方法的特异性，要么提高第二种方法的特异性，以达到预期效果

---

此外，您还可以使用

！重要信息

在任何规则的末尾，您希望以更高的特定性覆盖另一个规则。请注意，这必须分别应用于每个样式。

您可以使用

！重要信息

，以防止覆盖样式

例如：

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

你好

傅先生 { 字体大小：20px； } .酒吧 { 字体大小：5px！重要； }

---

在上面的例子中，将应用

重要的
版本。
因为更具体，或者在简单的上面有更长的选择器（#菜单页面li a）。编辑一个。
不是最长的-最具体的。！重要人物做到了。但我怎样才能使它更具体呢？我认为将类“附加”到指定的元素（div.page\u content\u actions li a）会使它更具体！另一个技巧是“foo bar”| |“bar foo”类的序列，其中最后一个类覆盖了以前类的属性现在我自己也不知道：）但我可以按顺序看到登录。
div div span {
    background: red
}

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