如何仅使用内联样式统一修改<li>元素的文字颜色？

情况1：修改所有列表项文字的颜色 #

直接在列表的父容器（<ul> 或 <ol>）上添加内联 color 样式即可——文字颜色属性是可继承的，所有子列表项会自动继承这个颜色，无需给每个 <li> 单独设置样式。

示例代码：

<ul style="color: #2ecc71;">
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ul>

情况2：单独修改列表项目符号的颜色（文字颜色不变） #

由于内联样式无法直接控制 CSS 伪元素 ::marker，可以用一个小技巧实现：

1. 在父容器 <ul>/<ol> 上设置项目符号的目标颜色；
2. 给每个列表项的文字外层套一个 <span>，用内联样式把文字颜色改回你需要的原色。

这种方式不需要给每个 <li> 单独设置颜色样式，父级一次性控制标记颜色，<span> 的样式可以统一复用。

示例代码：

<ul style="color: #e74c3c;">
  <li><span style="color: #333;">第一个列表项</span></li>
  <li><span style="color: #333;">第二个列表项</span></li>
  <li><span style="color: #333;">第三个列表项</span></li>
</ul>

内容的提问来源于stack exchange，提问作者Sourav Saha