Detailed explanation of inheritance, particularity, cascading and importance in CSS

1. Inheritance

#Some CSS styles are inherited, so what is inheritance? Inheritance is a rule that allows styles to be applied not only to a specific html tag element, but also to its descendants. For example, the following code: If a certain color is applied to the p tag, this color setting applies not only to the p tag, but also to all sub-element text in the p tag, where the sub-element is the span tag.

p{color:red;}   
<p>三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

The result is that the text in p and the text in span are both set to red. But note that some css styles are not inherited. For example, border:1px solid red;

p{border:1px solid red;}

In the above example, the function of the code is just to set the border to 1 pixel, red, and solid border line for the p tag, while for The child element span has no effect.

2. Particularity

#Sometimes we set different CSS style codes for the same element, then which one will be enabled for the element? What about CSS styles? Let’s take a look at the following code:

p{color:red;}   
.first{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

p and .first both match the p tag, so which color will be displayed? green is the correct color, so why? This is because the browser determines which css style to use based on the weight. The one with the highest weight will use the css style.

The following are the weight rules:

The weight of the label is 1, the weight of the class selector is 10, and the weight of the ID selector is 10 The maximum weight value is 100. For example, the following code:

p{color:red;} /*权值为1*/   
p span{color:green;} /*权值为1+1=2*/   
.warning{color:white;} /*权值为10*/   
p span.warning{color:purple;} /*权值为1+1+10=12*/   
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

Note: There is also a special weight - inheritance also has a weight but it is very low. Some literature suggests that it is only 0.1, so it is understandable. The inherited weight is the lowest.

3. Cascading

Let’s think about a problem: if there can be multiple css styles for the same element in an html file And what should I do if these multiple css styles have the same weight value? Well, the cascading in this section helps you solve this problem.

Cascading means that there can be multiple css styles for the same element in the html file. When there are styles with the same weight, it will be determined based on the order of these css styles. The css style at the end is will be applied.

Such as the following code:

p{color:red;}   
p{color:green;}

Finally, the text in p will be set to green. This cascading is easy to understand. It is understood that the later styles will overwrite the previous styles.

So the previous CSS style priority is not difficult to understand:

Inline style sheet (inside the tag) > Embedded style sheet (in the current file) > External style sheet (external file).

4. Importance

When we are doing web page code, there are some special situations where we need to set the highest weight for certain styles. ,what to do? At this time we can use !important to solve it.

The following code:

p{color:red!important;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

At this time, the text in the p paragraph will be displayed in red.

Note: !important should be written in front of the semicolon

Note here that when the web page creator does not set the css style, the browser will display the web page according to its own set of styles. And users can also set their own custom styles in the browser. For example, some users are accustomed to setting the font size to a larger size so that they can view the text of the web page more clearly. At this time, please note that the style priority is: browser default style < web page creator style < style set by the user, but remember that the !important priority style is an exception and has a higher weight than the style set by the user.

The above article briefly discusses inheritance, particularity, cascading and importance in CSS. This is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support PHP Chinese. net.

For more detailed explanations of inheritance, particularity, cascading and importance in CSS, please pay attention to the PHP Chinese website!