Solution to attribute priority problem in CSS writing

This article mainly introduces the issue of attribute priority in CSS writing, focusing on the hierarchical calculation and inheritance relationship between elements. Friends in need can refer to it

When you add a style to When you find that it doesn't work on an element, you have a priority problem. So how should we deal with CSS priority issues? Below I have summarized some common rules for solving CSS priority issues.

Style distance
We can add specified styles to elements by using external styles, internal styles, inline styles, etc. The priority at this time is:

External style This should be easier to understand, which means that the closer the style is to the element, the greater the priority. For example:

<style type="text/css">   
  p{color:blue;} //内部样式   
</style>   
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)   
<p style="color:red">my color</p>//内联样式

The priority displayed at this time is red > blue > green. So my color appears as red.

Special calculation method
Assume that there is 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 What about determining priorities?

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

Here is a special calculation method:

elements, pseudo elements: 1 – (0,0,0,1)
Class, pseudoclass, attributes: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
Inline style: 1 – ( 1,0,0,0)
The attributes here refer to:

The effect is as follows:

The priority is from top to bottom As for how to calculate, we also give an example:

p: 1 element – ​​(0,0,0,1)
p: 1 element – ​​(0,0,0,1 )
#idSelector: 1 ID – (0,1,0,0)
p#idSelector: 1 element, 1 ID – (0,1,0,1)
p#idSelector p: 2 elements, 1 ID – (0,1,0,2)
p#idSelector p.classSelector: 2 elements, 1 class, 1 ID – (0,1,1,2)
So now let’s look at the above example again:

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)

Since the priority is (0,1,0,1) > (0,0,1, 2), so we know that the last displayed color is red.

Inheritance
Inheritance is a relatively easy-to-understand concept, that is, child elements will inherit the style of the parent element. For example:

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

The span in the above example will inherit the style of the parent element p. But not all properties will use inheritance by default, such as the margin and padding properties. For example:

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

At this time, element p will not inherit the margin and padding styles of parent element p unless you do this:

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

Summary
1. First find all the styles that act on the elements. (Do not ignore styles from inheritance)
2. Calculate the distance of the style. The closer the distance, the greater the priority.
3. Use special calculation methods to determine styles within the same distance.
4. If the calculated results are the same, the later declared style overrides the previously declared style.
5. If !important is set in a style, that style will prevail regardless of its priority. (Unless absolutely necessary, it is strongly not recommended to use this method, because it is undoubtedly a usage that does not conform to the CSS idea)

The above is the detailed content of Solution to attribute priority problem in CSS writing. For more information, please follow other related articles on the PHP Chinese website!