使列表项的一部分具有不同的颜色，而不是整个列表项?

Question

我有一个列表框项目，如"我理解并同意....."。为了通知用户，我要求在"我理解"之前在该项前面添加一个文本，其中包含一个名为"New："的文本，颜色为绿色，以便用户了解它是列表框中的新语句。我所做的使整个列表项为绿色，我可以只在列表项中使单个文本颜色为绿色而不是整个列表项吗？

<asp:ListItem Value="4" onclick="CheckAllConditions();" style="color:green"> New:  I understand and agree the statement!  </asp:ListItem>

我只需要文本"New："作为绿色。怎么做？请帮忙。

Answer 1

我认为Joel Coehoorn的回答是不正确的。不能将<span>元素放在 ListBox 控件的ListItem内。

ASP.Net 中的 listbox 控件在浏览器中呈现为<select>元素，其中每个ListItem都转换为<option>元素。可以对整个<option>元素进行设置样式，但不能单独设置其部分的样式。

根据MDN的说法，选项元素只允许其中的纯文本(即不允许使用其他元素，如<span>)。

允许的内容：文本，可能带有转义字符(如é)。

下面是一个示例，我在其中放置了标记以设置<option>元素内文本的样式。您会注意到整个第二个选项都是绿色的，而第三个项目的任何部分都不是绿色的。

<select multiple>
<option>Some text</option>
<option style="color: green;">Green text</option>
<option><span style="color: green">Green text</span> - Normal Text</option>
</select>

---

但是，您可以使用伪元素在选项之前插入内容"New"并为其提供绿色。

在下面的代码片段中，我将 CSS 类new-item应用于其中一个选项，并将带有绿色的内容"New"添加到使用它的::before伪元素中。

.new-item::before {
content: "New: ";
color: green;
}

<select multiple>
<option>Some text</option>
<option style="color: green;">Green text</option>
<option class="new-item">
I understant...
</option>
</select>

ASP.Net 中的标记应为：

<asp:ListItem Value="4" onclick="CheckAllConditions();" CssClass="new-item"> 
I understand and agree the statement!  
</asp:ListItem>

Answer 2

<asp:ListItem Value="4" onclick="CheckAllConditions();"> 
<span style="color:green;">New:</span>  
I understand and agree the statement!  
</asp:ListItem>