Recently, I have been delving into the CSS priority level of selectors based on this page: https://www.w3.org/wiki/CSS/Training/Priority_level_of_selector. However, I encountered an issue:
* {
margin: 0;
padding: 0;
}
.see-me,
ul li {
width: 300px;
height: 300px;
border: 1px solid red;
}
/* [0,0,0,2] */
ul li {
background: yellow; color: red;
}
/* [0,0,10,0] */
.see-me {
background: gray; color: blue;
}<div class="see-me">
<ul>
<li>.see-me has a higher priority level [0,0,10,0], so why is the font color not blue, but red?</li>
</ul>
</div>The font color should be blue, yet it appears as red! You can view the DEMO for reference.