The rookie's HTML5 road DAY 08-----Three major features of CSS

1 Three major features of CSS

The priority of cascading inheritance is the three characteristics that we must master when learning CSS

1.1 CSS stackability

The so-called cascade refers to the superposition of multiple CSS styles

It 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 at this time

For example, if the internal text color is assigned to a label as red, and then the color is assigned as blue, a label with different values ​​for the same style appears, which is a style conflict.

This code sets two different attributes in the same id tag, the

result is blue, the principle of proximity

In general, if there is a style conflict, the order of CSS writing will be followed, and the final style shall prevail.

1. For style conflicts, the principle to follow is the principle of proximity . If the pattern is close to the structure, execute that pattern.
2. No conflicts in styles, no cascading

1.2 Inheritance of CSS

The so-called inheritance means that when writing a CSS style sheet, the child tags will inherit certain styles of the parent tag, such as text color and font size. To set an inheritable property, just apply it to the parent element.


Child tags inherit most of the attributes of parent tags

1.3 CSS priority

When defining CSS styles, it often appears that two or more rules are applied to the same element, and then there will be a priority issue.

When considering weights, beginners also need to pay attention to some special circumstances, as follows:

The weight of the inherited style is 0. That is, in the nested structure, regardless of the weight of the parent element's style, when it is inherited by the child element, its weight is 0, which means that the style defined by the child element will override the inherited style.
Inline style takes precedence . The element with the style attribute applied has a very high inline style weight, which can be understood as much greater than 100. In short, he has a higher priority than the selectors raised above.
When the weights are the same, CSS follows the principle of proximity. That is to say, the style close to the element has the highest priority, or the style that is 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 greatest priority.

It stands to reason that the inline formula has the highest weight, but! The important weight ignores other weights and is always the largest

1.4 The peculiarities of CSS

Regarding CSS weights, we need a set of calculation formulas to calculate. This is CSS Specificity , which we call CSS features or extraordinary. It is a standard for measuring the priority of CSS values. The specific specifications are as follows:

Specificity is represented by a four-digit string (CSS2 is three digits), which is more like four levels. The value is from left to right, with the largest on the left. One level is greater than one. There is no hexadecimal between the digits, and the levels are not allowed. Beyond .

Weights can be superimposed

For example:

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1

1. There is no base between the digits. For example: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0,0, 1, 0, so there will not be 10 divs. Catch up with a class selector situation.
2. The inherited weight is 0