css - 在 CSS 中包括重置边距/填充

Question

我不确定如何表达这个问题，所以请提前原谅我。

基本上，我在我的 wordpress 主题上使用了一个垂直菜单的 Accordion 模板，我已经设置好了 - 但是，在代码中有一个重置:

代码A

/*---- basic reset--*/
* { 
margin: 0; 
padding:0; }

这是我的导航样式的最顶部，其余样式如下:

代码B

/*heading styles*/
#accordian h3 {
font-size: 12px;
line-height: 34px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #1f84ba; 
background: linear-gradient(#1f84ba, #156691);
}

/*heading hover effect*/
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*list items*/
#accordian li {
list-style-type: none;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}

/*hover effect on links*/
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}

/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}

#accordian li.active ul {
display: block;
}

下面是我的编辑，这将包含在代码 B 的顶部。

代码 C(编辑)

#accordian {
background: #1f84ba;
width: 225px;
color: white;
margin: 20px auto 0 auto;

在页面顶部进行基本重置(代码 A)似乎将其应用于整个页面(我想这就是 * 的意思，但我是 CSS 的新用户)

我只希望它应用于导航 (#accordion)，这样它就不会改变我整个页面的边距和填充。

非常感谢，我知道这可能非常简单 - 我希望它不会造成太多的努力!

Answer 1

如果我的理解正确，您只需将 * 更改为 #accordian。示例:

/*---- basic reset--*/
#accordian { 
margin: 0; 
padding:0; }

更新

完全删除以下代码:

* {
margin: 0;
padding: 0; }

然后，假设您不希望导航上有边距或填充，请将您在更新中提供的代码(代码 C)更改为:

#accordian {
background: #1f84ba;
width: 225px;
color: white;
margin: 0;
padding: 0;
}

也不要忘记您的操作顺序。我被扔了很多次才意识到我在底部有冲突的代码。如果有疑问，请将 !important 添加到 margin 和 padding 选项，看看是否有所不同。如果是这样，您就可以安全地假设某处存在一些冲突代码。

例子:

#accordian {
background: #1f84ba;
width: 225px;
color: white;
margin: 0 !important;
padding: 0 !important;
}