1

我对 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。我希望它尽可能短，在一个文件中，因此是内联样式。

4

4 回答 4

1

您在元素上设置的任何 CSS 规则li也适用于列表项标记（项目符号、数字）。这很不方便，而且 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>

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

于 2013-10-07T12:40:58.123 回答
0

像这样

演示

css

ol li span{
color:blue;
}
于 2013-10-07T12:31:21.803 回答
0

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

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

祝一切顺利。

于 2013-10-07T12:31:57.790 回答
0 
<li><span style="color:blue">Item</span>2</li>
于 2013-10-07T12:33:13.043 回答