将CSS分配给特定元素

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> 元素，而不是其他元素，因此需要将字体部分代码注释掉并更改颜色。

请问应该如何操作？谢谢！

- shaiss

---

只是提醒一下，这个 CSS 概念在许多 CSS 教程中都有涉及，并且可以通过谷歌搜索轻松找到。 - Zoidberg

是的，我知道，但我甚至不知道该从哪里开始搜索。 - shaiss

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就可以跨浏览器轻松实现此目的的方法。

- Quintin Robinson

---

就像 Quintin 指出的那样，您必须为 <li> 标签设置 class 属性。 - ChadNC

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

- o.k.w

Answer 3

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

<li style="font: Helvetica; color: #a9a9a9;">...</li>

- James Sutherland

---

这并不是一个好主意，因为它将内容和呈现耦合在同一个文件中--你无法在不编辑内容的情况下更改样式。 - Steve Gilham

Answer 4

另外，除了 Helvetica，你可能应该考虑为该规则添加更多的备用无衬线字体。我很喜欢这种字体，但大多数人的计算机上都没有它。

编辑：在我写这个答案的时候，有人发布了与我相同的答案。不过我会保留这个旁注，因为它很有用。

- Ryan Lynch

Answer 5

如前所述，类(class)或ID(id)都可以实现它 - 取决于您是否将使用这个特定的样式来唯一地为此列表项服务，或者计划在其他地方使用它（尽管您只能在页面上使用一个ID，但您可以在另一个页面上重复使用一个ID）。

您可以在一个列表中混合和匹配类和ID，因此即使您希望为列表中的每个列表项设置不同的样式，也可以使用不同的类和ID来实现。

例如，您可以拥有默认设置列表样式的样式，以便没有类或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>

- BlissC