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

Question

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

谢谢！

Answer 1

您应该避免使用！重要的是，这是一种糟糕的做法，虽然它可以覆盖继承的样式，但同样可以通过分层css结构来创建更强大的css来实现！重要规则。

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

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

Answer 2

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

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

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

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

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

这应该确保#facebook元素得到一个0 padding，并且background-color被设置为透明。

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

Answer 3

违背初衷怎么样？

例如，浮动所有李的权利，使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/