HTML/CSS 列表样式帮助 :S

Question

我制作了一个列表并使用 ul 标签添加了一个 id，但我似乎无法让我的列表设置样式的唯一方法是实际设置 ul 和 li 标签的样式，但如果我这样做，我的所有列表都会看起来相同的。如果你不明白这里的代码-

 <ul id="navigation">
                <li><a href="http://www.google.com">Home</a></li>
                <li>Premium</li>
                <li>FAQ</li>
                <li>Disclaimer</li>
            </ul>
            <ul id="login">
                <li>Login</li>
                <li>-</li>
                <li>Register</li>
            </ul>

但我不希望这两个列表都按照我希望它们不同的方式设置样式，而使样式生效的唯一方法是 -

#navigation{
color:#808080;
float:left;
margin-top:50px;
font-family:"Myriad Pro", Times, serif;
}

#login{
color:#808080;
float:right;
margin-top:50px;
font-family:"Myriad Pro", Times, serif;
}

ul li{
display:inline;
text-decoration:none;
padding:15px;
 }

所以我的问题是如何将 padding 15px 应用到导航列表而不是登录列表我尝试将它放在导航 css 代码中但它什么也没做:(

谢谢!!

Answer 1

像这样尝试:

#navigation li {
   ... your styles
}

#login li {
   ... your different styles
}

您也可以先设置默认的 li 样式，然后在 #navigation 中为 li 覆盖/添加它们，如下所示:

li {
   ... default styles
}

#navigation li {
   ... styles for navigation list, on top of the default ones
}