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

Question

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

基本上，我在我的 wordpress 主题上使用了一个手风琴模板作为垂直菜单，并且我已经设置了它 - 但是，在代码中有一个重置：

代码 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 添加到边距和填充选项中，看看是否有区别。如果是这样，您可以放心地假设某处存在一些冲突代码。

示例：

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