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

所以我的问题是如何将填充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
}

Answer 2

最好的方法是首先放置通用样式，然后放在

之后的更具体的样式

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

Answer 3

您需要使用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;
}

HTML / CSS列表样式帮助：S

3 个答案: