Question

我的页面中有两个列表。 #main元素中的第一个元素，#footer元素中的第二个元素。由于#footer元素位于#main元素内，因此这些是我的规则：

body div#wrap_all div#main div#footer div.widget_nav_menu ul#menu-footer li {
    border-right: 1px solid #D2AB67;
    display: inline-block !important;
    padding: 0 10px;
}
/* I dont want this rules below to be applied to the list in the footer */
body div#wrap_all div#main section.avia_widget_section ul li {
    border-bottom: 1px solid #E0D3CD;
    font-family: "Georgia";
    font-size: 17px;
    font-style: italic;
    padding: 7px 0 0 22px; /* O_o this rule is overwritten of course */
}

问题：第一个列表的规则也适用于.footer元素中的列表。我该怎么做才能避免这种情况？

Answer 1

第一个选择器显然比第二选择器有更多分数，所以我只是建议通过在选择器中定义更多步骤来使第二条规则更精确。

当然，丑陋的解决方案是在你的css值末尾使用!important：

padding: 7px 0 0 22px !important;

但我强烈建议您重写css选择器，而不要使用!important。

Answer 2

你可以使用：not（）选择器。

body div#wrap_all div#main section.avia_widget_section :not(#footer) ul li {
}

或重置特定规则：

body div#wrap_all div#main section.avia_widget_section #footer ul li {
padding:0; /* or whatever */
}

我希望规则被覆盖

2 个答案: