-1

我制作了一个列表并使用 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;
 }

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

谢谢！！

4

3 回答 3

3

试试这样：

#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
}
于 2012-11-13T12:55:25.830 回答
1

最好的方法是先放置通用样式，然后是更具体的样式

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

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

#navigation {
  float:left;
}

#login{
  float:right;
}

#navigation li {
  padding:15px;
}
于 2012-11-13T13:00:59.163 回答
0

您需要使用 css 后代选择器 - http://www.w3.org/TR/CSS2/selector.html#descendant-selectors：

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

#login li{
    display:inline;
    text-decoration:none;
}
于 2012-11-13T12:57:51.793 回答