A problem about the weight of CSS

the popular point of CSS weight I know is! important > id > class > tag

I was baffled when I was doing a problem today, as shown in the figure

.

the code is as follows

< H1 > html < / H1 >
<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
< H1 > css < / H1 >
ul-sharpawesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

shouldn"t the color of the Sausage be red? from the weight point of view, the css above is (0Magne1) and the css below is (0mem0re2)
, but the answer is indeed blue, and it is also blue when tested on the browser.
looked up the information about the weight of CSS, and the answer was also close to red

.
Css
Feb.12,2022

! important > inline style > ID selector > Class selector > tag > wildcard > inheritance > browser default attribute
here the first css should be styled for the parent element, the Sausage color is inherited, and the second segment is directly styled, so the priority should be higher


.

the previous answer is not very standard.

  1. the final CSS is determined by the following parts:
    1) importance (whether the importance, style is declared in import or inline, browser default style, etc.)
    2) particularity (for selectors, id/ class selector / element selector)
    3) inheritance (1, 2 if not, Use inheritance or default style)

    see https://www.w3.org/TR/css3-ca.

    for details

    so when it comes to your problem, the li.favorite span selector has been applied to span, and color: red is the inheritance style used when span is unattended.


is blue. The
style will be overwritten. The two styles defined here depend on which one is closer

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3fb2e-2bc2e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3fb2e-2bc2e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?