我想要覆蓋的規則

我在我的頁面中有兩個列表。第一個在#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 –

我想要覆蓋的規則

回答

相關問題