Why can I not define color property for a div [duplicate]-CodePudding

This HTML is for a page in a mobile app, so all of the CSS styles have to be defined inline. I have a section of the page that I want to have a dark background and white text, but somehow the text is being rendered as black and I don't know why. What do I need to do to define the color property for a div? Every color:#FFFFFF definition is being ignored, in spite of the !important tag. Here is a scaled down version of the page:

<!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>

CodePudding user response：

Because the ul and li selectors are more specific than the color from the div and are therefore prioritized by CSS.

Remove them and the text gets white.

Demo:

<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>