如何更改列表中一个元素的文本样式？

Question

我想更改列表中项目文本的样式，例如“黄色”：

• white
• orange
• 黄色
• 蓝色

有没有办法在不使用JavaScript的情况下从CSS执行此操作。元素不一定是列表中的倒数第二个。 非常感谢ANy指针

Answer 1

您可以为要设置颜色的列表项指定ID或类。然后在样式表中，您只需为该id或类设置颜色。这是一个例子：

<style>
    .highlight {color: yellow}
</style>
<ul>
    <li class="highlight">yellow</li>
</ul>

Answer 2

你可以使用nth-child：

#example:nth-child(3) {
    background-color: yellow;
} 

假设一个列表如：

<ul id="example">
<li>white</ul>
<li>orange</li>
<li>yellow</li>
<li>blue</li>
</ul>

没有基于元素内容的CSS选择器。你可以使用jquery：

设置css属性值：

$("#example li:contains('yellow')").css('background-color','yellow');

或者如果你想分配一个css类：

$("#example li:contains('yellow')").addClass('makeYellow');

其中上面示例的css类似于：

.makeYellow { background-color:yellow; }

Answer 3

您可以使用id选择器来实现此目的，您应该修改html代码并在列表中为该项添加id。

#yellow{
  background-color: yellow;
  }

        <uL>
  <li>white</li>
  <li>orange</li>
  <li id="yellow">yellow</li>
  <li>blue</li>
</ul>