css - 列表 - 你可以在同一个列表中有两种样式吗？

Question

我正在开发的网站顶部有一个导航栏，它是使用无序列表创建的。我需要添加一个 Facebook 按钮以与导航栏的其余部分内联，但我希望它不采用与导航栏相同的 CSS 样式属性（即：与该特定列表相关的 CSS 属性）。有没有办法编写代码，以便我可以让 Facebook 按钮与导航栏内联，但应用不同的样式？

谢谢！

Answer 1

您应该避免使用 !important，这是一种不好的做法，虽然它可以覆盖继承的样式，但可以通过分层您的 css 结构以创建更强大的 css 来实现相同的效果，阅读这篇文章了解如何在不使用的情况下实现相同的效果!important 规则。

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

要为 facebook 按钮设置不同的样式，只需给它一个 id（例如 #facebook）并使用它来给它特定的样式

li#facebook {
    padding: 0; 
    margin: 0;
}

然后，这会将这些样式仅应用于具有 facebook ID 的元素

Answer 2

违背粮食怎么办？

例如 - 浮动所有 li 的权利，使 facebook 链接成为第一个菜单项。然后，您可以使用 :first-child 来设置 facebook 菜单项的样式，并且使用 CSS 任何元素都不需要标识符？

HTML：

<ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
</ul>

CSS：

* {
    padding:0;
    margin:0;
}

ul {
    float:right;
    list-style:none;
}
li {
    float:right;
    margin:0 0 0 20px;
}
li a {
    float:right;
    text-decoration:none;
    color:#000;
}
li:first-child a {
    font-weight:bold;
    color:#f00;
}

这是一个例子：http: //jsfiddle.net/seemly/wMWHc/

Answer 3

是的，您可以为 Facebook 元素设置单独的样式，这些样式将使用!important声明覆盖父 CSS。这个网站提供了一个很好的解释。

没有你的 CSS 很难解释如何使用它，但让我们举个例子。像这样是特定列表 ( li) 元素的父 CSS 样式：

li {
  padding: 20px;
  margin 0 5px 0 5px;
  background-color: #ffc;
}

因此，如果您希望 Facebook 元素不继承paddingor background-color，请设置一个名为#facebook然后设置的类，如下所示：

li#facebook {
  padding: 0 !important;
  background-color: transparent !important;
}

这应该确保#facebook元素获得 0padding并且background-color设置为透明。

但就像我说的，没有你的 CSS 很难给出一个可靠的答案，所以你应该!important在自己的设置中进行试验以获得你想要的结果。