使用内联样式为列表项目符号着色不同于列表项答案

【问题标题】：Using inline styling to color list bullets differently than list items使用内联样式为列表项目符号着色不同于列表项
【发布时间】：2016-08-31 10:15:12
【问题描述】：

我正在使用内部 CSS 样式表来定义 <ol> 和 <li> 元素的样式。但是，对于我拥有的一个列表，我想使用内联样式。我希望列表元素是一种颜色（蓝色），而列表项目符号是另一种颜色（红色）。如果我要使用内部样式表，以下内容将为相关列表完成此操作：

<style>ol { list-style-type:upper-roman; color:blue; } ol li span { color: red; } </style>

但我不知道如何使用内联样式来做到这一点。我不想为每个<li> 设置样式。以下内容适用于对所有内容仅应用一种颜色：

<ol list-style-type:upper-roman; style="color:blue;">
<li><span>Apple</span></li> 
<li><span>Orange<span></li> 
<li><span>Pear<span></li> 
<li><span>Grape<span></li> 
</ol>

但是我不知道如何将部分添加到内联样式表中的内联样式声明中：

ol li span { color: red; }

为了使列表项不同于项目符号的颜色，而不需要对每个列表项本身进行编码。

【问题讨论】：

不。你不能。您必须为此方面使用内联样式。
那是电子邮件的标记，这就是你应该使用内联样式的原因吗？
内联样式就是这样，如果属性没有被子元素继承，比如color，或者你需要反转一个继承的值，那么你将不得不应用样式应该影响的每个元素的样式。
非常感谢大家！谢谢@hungerstar。我会投票，但我是一个相对新手，还不能投票。
@coder77 如果我的回答回答了您的问题，请接受。

标签： css html-lists

【解决方案1】：

你必须非常具体和深思熟虑。这就是内联样式的工作方式。您将它们直接应用于每个元素。您可以摆脱一些继承，但如果您需要覆盖该继承，则必须为每个元素手动覆盖它。

<ol style="color:blue; list-style-type:upper-roman;">
    <li><span style="color: red;">Apple</span></li> 
    <li><span style="color: red;">Orange</span></li> 
    <li><span style="color: red;">Pear</span></li> 
    <li><span style="color: red;">Grape</span></li> 
</ol>

【讨论】：