what is css cascade-Front-end Q&A-php.cn

what is css cascade

青灯夜游

Release： 2023-01-04 09:35:23

Original

5496 people have browsed it

CSS cascading refers to the superposition of multiple CSS styles. When the CSS style configures the same attribute for the same element, it handles conflicts based on the cascading rules (weight) and selects the attribute specified by the CSS selector with the highest weight. , is also generally described as a high-weighted layer covering a low-weighted layer, so it is also called stacking.

what is css cascade

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS cascading (important)

refers to the overlay of multiple CSS styles.

is the browser's ability to handle conflicts. If an attribute is set to the same element through two identical selectors, then one attribute will cascade the other attribute.
Principles:
1. For style conflicts, the principle to follow is the proximity principle, that is, the writing position of CSS.
2. Styles do not conflict and will not cascade

CSS inheritance
When writing a CSS style sheet, the child tag will inherit some styles of the parent tag, such as text color and font size. To set an inheritable property, just apply it to the parent element.
Note: Proper use of inheritance can simplify code and reduce the complexity of CSS styles. Child elements can inherit the style of the parent element (text-, font-, line-, these elements at the beginning can be inherited, as well as the color attribute)

CSS priority
Define CSS style When two or more rules are often applied to the same element, there will be a priority issue.
When considering weight, beginners also need to pay attention to some special situations, as follows:
The weight of inherited styles is 0. That is, in a nested structure, no matter how big the weight of the parent element style is, when it is inherited by the child element , his weight is 0, which means that the style defined by the child element will override the inherited style.
Inline styles take precedence. The weight of the inline style of the element to which the style attribute is applied is very high, which can be understood as much greater than 100. In short, it has a greater priority than the selectors mentioned above.
When the weights are the same, CSS follows the proximity principle, which means that the style closest to the element has the highest priority, or the style ranked last has the highest priority.
CSS defines an !important command, which is given the highest priority. It is also said that regardless of the weight and the distance of the style position,! important has the highest priority.

CSS Specificity
Regarding CSS weight, a set of formulas are needed to calculate it. It consists of four digits. The value is from left to right, with the largest on the left. The level is greater than the first level, there is no base between the digits, and the levels cannot be surpassed.
Inherited or * value: 0, 0, 0, 0
Each element (tag) value: 0, 0, 0, 1
Each class, pseudo-class value is: 0, 0, 1, 0
Each ID is: 0, 1, 0, 0
Each inline style value: 1, 0, 0, 0
Each !important value: infinity

1. There is no base between digits.
2. Through the influence of inheritance, the weight is 0, [that is, the style does not carry text tags] such as:

.colorRed{
    color:#f00; /* 没有选中p标签，所以只是通过继承影响的，权重为0 */
}
p {
    color:#0f0; /* 权重为1 */
}
<div class="colorRed">
    <p>颜色</p>
</div>

Copy after login

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
 
#father #son{ /*权重为0,2,0,0*/
color:blue;
}
#father p .c2{ /*权重为0，1，1，1*/
color:black;
}
div .c1 p .c2{ /*权重为0，0，2，2*/
color:red;
}
#father {
color:green !important; /*继承的权重为0*/
}
 
</style>
</head>
<body>
<div id="father">
<p id="son">颜色</p>
</div>
</body>
</html>

Copy after login

The effect is as follows: