Question

我在页面上有一个<li>元素，我想以某种方式查看。更改css会影响所有<li>元素。

这是我要改变的元素
<li>Outside Job<span class="toggle"<input type="checkbox" /></span></li>

这是<ul><li>

的css

ul li {
    /*font: normal 17px Helvetica;*/
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;}

注释掉的字体部分和颜色是我想要影响的<li>，而不是其他任何颜色。

我该怎么做？谢谢！

Answer 1

如果你可以在LI上设置一个id或一个类，那么它将是微不足道的。

ul li {
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;
}

ul li.special {
    font: normal 17px Helvetica;
}

<li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>

除此之外，没有简单的方法可以单独使用css进行跨浏览。

Answer 2

基本上，您只需要为其添加额外的标识/属性，这样您就可以使用CSS选择器来设置li标记的样式。示例：

/*using class*/
ul li.different {font: normal 17px Helvetica;}

/*using attribute, title in this case*/
ul li[title=diff] {font: normal 17px Helvetica;}

/*using id if it's one and only*/
#id {font: normal 17px Helvetica;}

Answer 3

或者在LI本身上使用内联样式STYLE =：

＆lt; li style =“font：Helvetica; color：＃a9a9a9;”＆gt; ...＆lt; / li＆gt;

Answer 4

另外，您应该考虑在Helvetica之外添加额外的回退无衬线字体到该规则。我是这种字体的忠实粉丝，但大多数人都没有在他们的电脑上使用它。

编辑：有人在我写这篇文章时发表了同样的答案。我会保留旁注，因为它很有用。

Answer 5

如前所述，无论是类还是id都会这样做 - 取决于你是否会将此特定样式用于此列表项，或计划在其他地方使用它（尽管你只能使用一次id一个页面，你可以在另一个页面上重用一个id。）

您可以在一个列表中混合和匹配类和ID，这样即使您希望列表中的每个列表项具有不同的样式，也可以使用不同的类和ID来执行此操作。

例如，您可以使用自定义列表样式的样式，以便没有class或id的项继承默认样式，然后可以控制各个项的任意数量的类和ID ......

<code><pre>
    <ul>
      <li>blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li id "extraspecial">blah blah blah</li>
      <li>blah blah blah</li>
    </ul>
</pre></code>

将css分配给特定元素

5 个答案: