我想要规则被覆盖 | 我想要规则被覆盖

本文介绍了我想要规则被覆盖的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have two lists in my page. The first one in the #main element, and the second one in the #footer element. Since the #footer element is inside the #main element these are my rules:

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 元素中的列表。我能做些什么来避免呢？

The problem: the rules of the first list are also applied to the list in the .footer element. What can I do to avoid that?

推荐答案

您可以使用：not（）selector。

you can use the :not() selector.

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

这篇关于我想要规则被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！