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

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

Answer 2

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

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

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

反对谷物怎么样？

例如 - 浮动所有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/

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

3 个答案: