The solution of attribute priority problem in CSS writing

This article mainly introduces the property priority in CSS writing, focusing on the hierarchy between elements and inheritance relationships, the need for friends can refer to the following

When you add a style to an element and find that it doesn't work, it's a matter of priority. So what should I do with CSS precedence, and here I summarize some common rules for solving CSS precedence problems.

Style distance
We can add the specified style to an element by using external styles, internal styles, inline styles, and so on, at which point the priority is:

External style < Inner style < inline style
This should be easier to understand, which means that the closer the element distance, the greater the precedence of the style. Such as:

<style type= "Text/css" >     p{color:blue;}//Internal style   </style>   <link rel= "stylesheet" type= " Text/css "href=" mystyle.css "/>//external style (Color:green)   <p style=" color:red ">my color</p>//inline style

The priority shown at this point is red > Blue > Green. So my color is shown in red.

Special method of calculation
Suppose you have the following code:

<style type= "Text/css" >     p p.classselector {color:blue}     #idselector p {color:red}   </style>   <p id= "Idselector" >     <p class= "Classselector" >my color</p>   </p>

We face the following CSS, how to determine the priority?

<style type= "Text/css" >     p p.classselector {color:blue}     #idselector p {color:red}   </style>

Here is a special calculation method:

Elements, pseudo-elements:--(0,0,0,1)
class, Pseudo-Class, attribute:-0,0,1,0
id:1– (0,1,0,0)
Inline style:--(1,0,0,0)
The properties here refer to:

The effect is as follows:

The priority is increased from top to bottom, and as for how to calculate, the same example illustrates:

P:1 elements – (0,0,0,1)
P:1 elements – (0,0,0,1)
#idSelector: 1 ID – (0,1,0,0)
P#idselector:1 elements, 1 x ID – (0,1,0,1)
P#idselector p:2 elements, 1 x ID – (0,1,0,2)
P#idselector p.classselector:2 elements, 1 classes, 1 ID – (0,1,1,2)
So now let's look at the example above:

P P.classselector {Color:blue}-(0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)   #idselector p {color:red}-(0,1,0,0) + (0,0,0,1) = (0,1,0,1)

Because of the priority (0,1,0,1) > (0,0,1,2), we know that the last color shown is red.

Inherited
Inheritance is a better understanding of the notion that child elements inherit the style of the parent element. For example:

<p style= "color:red" >     <p>my color</p>   </p>

The span in the previous example inherits the style of the parent element p. However, not all properties will default to inherited methods, such as the margin and padding properties. For example:

<p style= "margin:10px;padding:10px" >     <p>my color</p>   </p>

At this point, element p does not inherit the margin and padding style of the parent element p unless you do:

<p style= "margin:10px;padding:10px" >     <p style= "Margin:inherit;padding:inherit" >my color</p>   </p>

Summarize
1. First find all the styles that function on the element. (Do not ignore styles from inheritance)
2. Calculate the action distance of the style, the closer the distance, the greater the priority.
3. Use a special calculation method to determine the style within the same distance.
4. If the result of the calculation is the same, then the declared style overrides the previously declared style.
5. If!important is set in a style, the style will prevail regardless of its priority. (This method is strongly not recommended unless it is a necessity, as it is no doubt the use of CSS ideas)