使用内联样式设置单个列表项的样式？答案

【问题标题】：Styling individual list items using inline style?使用内联样式设置单个列表项的样式？
【发布时间】：2013-10-14 00:41:15
【问题描述】：

我对 HTML 和 CSS 完全陌生，所以请多多包涵。

我想更改有序列表中单个列表项的颜色，但我不希望列表编号更改样式。我还需要在一个 html 文档中执行此操作——没有单独的 CSS。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title> Test-page </title>
</head>

<body>
<h1> An html-file </h1>


<ol>
<li> Item 1 </li>
<li style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>


</body>
</html>

我能想到的使用内联样式解决这个问题的唯一方法是：

<ol>
<li> Item 1 </li>
<li><p style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>

但列表项将显示为单独的段落。我不想使用字体标签，我想使用 HTML5。我希望它尽可能短，在一个文件中，因此是内联样式。

【问题讨论】：

使用span 而不是p
另外，不要忘记关闭 span 标签，就像关闭 p 标签一样。可能会出现无法预料的后果。
尴尬。我发誓我已经搜索 w3schools 几个小时了，显然是找错地方了。谢谢伊泰。
w3schools 是一个错误的地方，见w3fools.com
@JukkaK.Korpela 我不知道。谢谢你启发我

标签： css html

【解决方案1】：

您在li 元素上设置的任何 CSS 规则也适用于列表项标记（项目符号、数字）。这很不方便，而且 CSS 仍然缺乏任何方法来单独设置列表标记的样式。

因此，您使用<li><p style="color:blue"> Item 2 </li> 之类的方法是您需要使用的解决方法，但是在选择添加的内部元素时，您需要考虑后果。 p 元素具有默认的顶部和底部边距，因此使用它，您需要在此处删除它们：

<li><p style="color:blue; margin:0"> Item 2 </li>

一种更简单的方法是使用div 而不是p，因为div 是语义上的块级容器元素，它不会导致默认渲染发生任何变化，只是它的内容从新行开始，并且内容从新行开始，由于列表标记，无论如何都会在这里发生。所以：

<li><div style="color:blue"> Item 2</div></li>

如果只有内联（短语级）内容，您可以使用span 而不是div。但div 更灵活，因为它允许内部列表、表格等元素。

【讨论】：

【解决方案2】：

喜欢这个

demo

css

ol li span{
color:blue;
}

【讨论】：

【解决方案3】：

尝试使用span 标签代替p。并且不要忘记正确关闭标签：

<ol>
    <li><span style="color:blue">Item 2</span></li>
</ol>

一切顺利。

【讨论】：

【解决方案4】：

<li><span style="color:blue">Item</span>2</li>

【讨论】：