[CSS Note 4] Inheritance, cascading and particularity of CSS

Some styles of CSS 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 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 third grade, I was still as timid as a mouse little girl.

In the above example, the function of the code is only to set the border to 1 pixel, red, and solid border line for the p tag, but it has no effect on the sub-element span.

2. Particularity
Sometimes we set different CSS style codes for the same element, so which CSS style will be enabled on the element? Let’s take a look at the following code:

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

In the third grade, I was still atimid as a mouse girl.

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, and the CSS style with the higher weight is used.

The following are the weight rules:

The weight of the label is 1, the weight of the class selector is 10, and the maximum weight of the ID selector 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 .notep{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 proposes that it is only 0.1, so it can be understood as inheritance. The lowest weight.

3. Cascading
Let’s think about a question: What if there can be multiple css styles for the same element in the html file and 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;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

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.

4. Importance
When we are making web page code, there are some special situations where we need to set the highest weight for certain styles. What should we 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, pay attention to the style priority: browser default style

The above is the content of [CSS Notes 4] on the inheritance, cascading and particularity of CSS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!