包括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的新用户）

我只想将它应用于导航（#acordord），这样就不会改变整个页面的边距和填充。

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

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;
}