To cut to the chase, the three main features of CSS are inheritance, hierarchy, and priority

First, inheritance

What it does: Sets some attributes to the parent element, which are also available to children and descendants

Note: Not all attributes can be inherited. Only attributes starting with _color/font- / text- / line_ can be inherited

Ex. :

<style> div{ color: blueviolet; font-size: 20px; text-align: center; line-height: 20px; background-color: burlywood; } < / style > < / head > < body > < div > < span > I am span < / span > < / div > < / body >Copy the code

I added color/font-size/line-height/text-align/background-color to the parent div element of SPAN. We opened the F12 browser developer mode

                                     

Inherited from div_, which means inherited from div_, and the other attributes are highlighted except background-color, which shows that CSS inheritance is partial

A word of caution: the color and underline of the a label cannot be inherited, and the size of the H label cannot be inherited correctly.

Two, the cascade

What it does: A way to deal with style attribute conflicts, the cascade will only occur if “Same label” is selected in multiple selectors and then “Same property” is set

Ex. :

<style> span{ color: cadetblue; } span{ color: chartreuse; } < / style > < / head > < body > < div > < span > I am span < / span > < / div > < / body >Copy the code

Here we select SPAN and set the same style property and two different colors

                                         

The first color is crossed, meaning that the first color is overwritten by the second color

So the question is, right? By what rules does the browser choose who to override whose style?

Which brings us to our next topic —->

Priority

Priorities are obvious: how do you stack them

I have summed up three ways of judging priority

1) Indirect selection (indirect selection is inheritance)

If both are selected indirectly, whoever is close to the target tag will have the style

<style> div ul{ color: blue; } div { color: red; } < / style > < / head > < body > < div > < ul > < li > CSS priority judgment < / li > < / ul > < / div > < / body >Copy the code

Through inheritance, indirectly select the li tag and set different font colors

                                                  

The browser chooses to inherit from ul because our UL tag is closer to our LI tag than the div tag

2. Directly select a selector of the same type

This conclusion is simple, whoever writes in the back of the style is up to him, directly look at the example:

<style> .li{ color: blue; } .li{ color: yellow; } < / style > < / head > < body > < div > < ul > < li class = "li" > CSS priority judgment < / li > < / ul > < / div > < / body >Copy the code

                                       

And you can see that blue is overlapped by yellow, because yellow is at the end

3. Directly select a different type of selector

Get straight to the conclusion: ID > Class > Tags > Wildcards > Browser Default

<style> #li{ color: red; } .li{ color: blue; } li{ color: yellow; } < / style > < / head > < body > < div > < ul > < li class = "li" id = "li" > CSS priority judgment < / li > < / ul > < / div > < / body >Copy the code

                                

Only the ID selector survived =.=

Other readers can come down and try again..

In fact, the priority issue is not finished, I would like to add two points: **! Important ** and weight

A,! important

Function: Used to increase the priority of an attribute in the selector of a directly selected tag, and can promote the specified attribute to the highest

Attention!! ! Important can only be used for direct selection!! And only one attribute can be promoted!! Not the whole selector!!

<style> #li{ color: red; } .li{ color: blue ! important; } < / style > < / head > < body > < div > < ul > < li class = "li" id = "li" > CSS priority judgment < / li > < / ul > < / div > < / body >Copy the code

The id selector has a higher priority than the id selector. Important, the result is…

                                      

Second, the weighting

When multiple selectors are mixed together, it is necessary to calculate the weight to determine the priority

So how to judge the total weight! ?

Calculation rule: Look at the quantity

Priority of more ID selectors > more class names > More tag names

<style> #div #ul .li{ color: red; } #div .ul .li{ color: yellow; } .div .ul .li{ color: blue; } < / style > < / head > < body > < div class = "div" id = "div" > < ul class = "ul" id = "ul" > < li class = "li" id = "li" > CSS priority judgment < / li > < / ul >  </div> </body>Copy the code

                                              

Because of the number of id selectors in the first one, it is denoted red

If the number of ID selectors = number of class names = number of tag names occurs, the weight will not continue to be calculated

It’s up to whoever writes it at the back