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

.

Previous: About the problem that the elementui event is triggered many times and the interface is called many times

Next: The VS Code terminal cannot be opened?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu