Inheritance and cascading of CSS study notes

1. Inheritance
Inheritance is a rule that allows styles to be applied not only to a particular 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 the text of all sub-elements in the p tag, where the sub-elements are span tags.
p{color:red;}

<p>When I was in third grade, I was a <span>timid little girl</span>. </p>

But note that some CSS styles are not inherited. Such as border: 1px solid red;


2. Special
If different CSS style codes are set for the same element, which CSS style will be enabled for the element
The browser determines which css style to use according to the weight, and which css style to use if the weight is high. 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 up to 100.
p{color:red;} /*The weight is 1*/
p span{color:green;} /*The weight is 1+1=2*/
.warning{color:white;} /*The weight is 10*/
p span.warning{color:purple;} /*The weight is 1+1+10=12*/
#footer .note p{color:yellow;} /*The weight is 100+10+1=111*/


3. Cascading
There can be multiple css styles for the same element and these multiple css styles have the same weight value
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 according to the order of these CSS styles, and the last CSS style will be applied.
p{color:red;}
p{color:green;}
<p class="first">In third grade, I was a <span>timid</span> little girl. </p>
Finally, the text in p will be set to green. This cascade is easy to understand. It is understood that the later style will overwrite the previous style.


4. Importance
Some special cases need to have the highest weight for some style settings, use !important
Note: !important should be written before the semicolon
p{color:red!important;}
p{color:green;}
<p class="first">In third grade, I was a <span>timid</span> little girl. </p>

Note here that when the web page maker 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 be larger, so that the text of the web page can be viewed more clearly. At this time, note that the style priority is: browser default style < web page maker style < style set by the user, but remember! The important priority style is an exception, and the weight is higher than the style set by the user himself