移动端行内样式下div的color属性不生效，加!important也无效？

• 行内样式不支持嵌套选择器：你写在div行内样式中的ul{color:#FFFFFF;} li{color:#FFFFFF !important;}规则完全无效，行内样式只能定义当前元素自身的样式，不能设置子元素的样式规则。
• 标签选择器优先级高于继承样式：你在头部style中给li标签全局设置了color:#000000，这个规则是直接命中li元素的，优先级远高于从父级ul、div继承来的字体颜色，所以父级设置的白色不会被li继承生效。
• 你仅给ul添加了白色字体的行内样式，没有直接作用到li元素上，所以li还是沿用了全局的黑色字体设置。

你只需要给每个li元素直接添加白色字体的行内样式即可，修改后的代码片段如下：

<section style="background-color: #0a3454;">
    <div style="color: #FFFFFF;">
      <div style="padding: 1.5em 0.3em 1.5em 0em; color:#FFFFFF !important;">
        <strong>
            <ul style="color:#FFFFFF !important;">
                <li style="color:#FFFFFF !important;">This text is supposed to be white but instead is black because of the initial style definition.</li>
                <li style="color:#FFFFFF !important;">Does anyone know why?</li>
            </ul>
        </strong>
      </div>
    </div>
</section>

如果同区域内li元素数量较多，你也可以直接在全局样式中给对应区块的li添加规则，但如果要求所有样式都必须用行内实现，就只能逐个给li添加行内color属性。

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