Я хочу, чтобы правила были перезаписаны

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

Первый селектор, очевидно, имеет больше баллов, чем второй, поэтому я просто предлагаю сделать второе правило более точным, указав больше шагов в селекторе.

Уродливые решение, конечно, использовать !important в конце своего значения CSS:

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 */ 
}