如何有一个简单的单词列表，但一个单词是不同的颜色

Question

我试图让其中一个是不同的颜色。

#red li {
  color: red;		
}

<ul>
  <li id="red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 1

'你去吧。

li#red{
  color: red;		
}
OR
#red{
  color: red;		
}

<ul>
  <li id="red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有很多方法可以使用CSS在DOM中定位元素。

常用的有：

#目标元素具有 id 属性时使用。

.目标元素具有class名称时使用。

您也可以直接定位元素。但是可能有许多相同类型的元素。

在您的情况下，只有一个带有id的<li>元素。因此，要定位，您可以使用li#id{property: value}或简单地 #id{property：value}，因为ids是高度具体和独特的。

Answer 2

您也可以只使用 html 样式标签。

<ul>
  <li style="color:red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 3

li#red{
  color: red;		
}

<ul>
  <li id="red">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

/*If you like to change just text color not bullet, please try the following one:*/
li #red{
  color: red;		
}

<ul>
  <li><span id="red">Coffee</span></li>
  <li>Tea</li>
  <li>Milk</li>
</ul>