Question

我是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>

但列表项似乎是单独的段落。我不想使用font-tag，我想使用HTML5。我希望它在一个文件中尽可能短，因此内联样式。

Answer 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>

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

Answer 2

喜欢这个

<强> demo

<强> CSS

ol li span{
color:blue;
}

Answer 3

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

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

一切顺利。

Answer 4

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

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

4 个答案: