我想要覆盖的规则

我在我的页面中有两个列表。第一个在#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元素。我能做些什么来避免这种情况？

来源

2014-01-21 ziiweb

你不需要使用标识分层选择，第一可以只是'＃菜单尺li'和第二可'#main节.avia_widget_section ul li'。此外，我们需要根据您的html结构，将您的HTML结构 –

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

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

padding: 7px 0 0 22px !important;

但我强烈建议你重写CSS选择器，而不是使用!important。

来源

2014-01-21 17:50:35 Mabedan

您可以使用：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 */ 
}

来源

2014-01-21 17:55:56

替换为：不是（#footer）或#footer –

我想要覆盖的规则

回答

相关问题