我对 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。我希望它在一个文件中尽可能短，因此内联样式。
最佳答案
您在 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是一个语义上的 emply block 级容器元素，除了它的内容从一个新行开始以及它之后的内容从一个新行开始之外，它不会导致默认呈现发生变化，由于列表标记，无论如何都会发生在这里。所以:
<li><div style="color:blue"> Item 2</div></li>
而不是 div , 你可以使用 span ，如果只有内联(短语级)内容。但是div更灵活，因为它允许内部列表、表格等元素。
关于css - 使用内联样式设置单个列表项的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19224876/