为什么我不能为 div 定义颜色属性 [重复]答案

【问题标题】：Why can I not define color property for a div [duplicate]为什么我不能为 div 定义颜色属性 [重复]
【发布时间】：2021-10-08 06:17:05
【问题描述】：

此 HTML 用于移动应用程序中的页面，因此必须内联定义所有 CSS 样式。我有一个页面的一部分，我想要一个深色背景和白色文本，但不知何故，文本被呈现为黑色，我不知道为什么。我需要做什么来定义 div 的颜色属性？尽管有 !important 标记，但每种颜色：#FFFFFF 定义都被忽略。这是页面的缩小版：

<!DOCTYPE html><html>
<head>
<title>Test file (1)</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>
body{background-color:#FFFFFF;}
p, blockquote, pre, ol, ul, li {color:#000000;}
h1, h2, h3 {color:#0a3454;}
</style>
</head>
<body>
<div id="page" style="margin:0;padding:0;width:100%;">
<div class="section-wrap" style="position:relative;top:-8px;left:-8px;right:-8px;margin:auto;width:104%;padding: 0;">
    <section style="background-color: #0a3454;">
        <div style="color: #FFFFFF;">
          <div style="padding: 1.5em 0.3em 1.5em 0em; color:#FFFFFF !important; ul{color:#FFFFFF;} li{color:#FFFFFF !important;}">
            <strong><ul style="color:#FFFFFF !important;">
                <li>This text is supposed to be white but instead is black because of the initial style definition.</li>
                <li>Does anyone know why?</li>
            </ul></strong>
          </div>
        </div>
    </section>
</div>
</div>
</body></html>

【问题讨论】：

标签： css inheritance

【解决方案1】：

因为 ul 和 li 选择器比 div 中的颜色更具体，因此由 CSS 确定优先级。

删除它们，文本变为白色。

演示：

<head>
<title>Test file (1)</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>
body{background-color:#FFFFFF;}
p, blockquote, pre, ol {color:#000000;}
h1, h2, h3 {color:#0a3454;}
</style>
</head>
<body>
<div id="page" style="margin:0;padding:0;width:100%;">
<div class="section-wrap" style="position:relative;top:-8px;left:-8px;right:-8px;margin:auto;width:104%;padding: 0;">
    <section style="background-color: #0a3454;">
        <div style="color: #FFFFFF;">
          <div style="padding: 1.5em 0.3em 1.5em 0em; color:#FFFFFF !important; ul{color:#FFFFFF;} li{color:#FFFFFF !important;}">
            <strong><ul style="color:#FFFFFF !important;">
                <li>This text is supposed to be white but instead is black because of the initial style definition.</li>
                <li>Does anyone know why?</li>
            </ul></strong>
          </div>
        </div>
    </section>
</div>
</div>
</body></html>

【讨论】：