What is CSS style proximity principle?

In CSS, the proximity principle of styles means that when multiple different style rules are applied to the same element, if the style weights are the same, the style close to the element has the greatest priority; the proximity principle also It can be understood that when multiple styles have the same weight, the style ranked last has the highest priority.

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

What is the CSS style proximity principle

CSS priority

In complex CSS style sheets, it is often not as simple as stacking different values of the same style , often two or more different style rules are applied to the same element. In this case, which style should be used? This is a typical CSS priority issue.

To deal with the priority issue, it is to consider the weight of the style. Here we will first introduce you to some special situations:

==The weight of inherited styles is 0. ==In other words, in a nested structure, no matter how big the weight of the parent element's style is, when the child element inherits, the weight applied to the child element is 0, that is, the style defined by the child element will override all inherited styles.

==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 higher priority than the above-raised selectors.

When the weights are the same, CSS follows the proximity principle. That is to say, 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. That is to say, regardless of the weight and the distance of the style position, !important has the highest priority.

css weight

Regarding CSS weight, we need a set of calculation formulas to calculate it. This is CSS Specificity, which we call CSS characteristics or non-specificity. It is a standard for measuring the priority of CSS values. The specific specifications are as follows:

Specificity is represented by a four-digit number string (CSS2 is three-digit), which is more like four levels, with values from left to right. The one on the left is the largest, one level is greater than one level, there is no base between the digits, and the levels cannot be surpassed.

(Learning video sharing:css video tutorial)

The above is the detailed content of What is CSS style proximity principle?. For more information, please follow other related articles on the PHP Chinese website!