Three features of CSS

Cascading inheritance priorities are the three features we need to learn about CSS.

First, the cascade

By cascading, I mean multiple CSS styles stacked on top of each other.

If an attribute is set to the same element using two identical selectors, then one attribute overlaps the other

For example, if a label is assigned a red text color and then a blue text color, the same style and different values may be assigned to the same label. This is a style conflict.

In general, if a style conflict occurs, the CSS is written in the order in which the last style prevails.

  1. The rules for style conflicts areNearby principle. If that style is near the structure, execute that style.
  2. styleNo conflicts, no overlapping

CSS final execution formula: in the Yangtze River, the waves behind push on the waves before, and the waves before die on the beach.

Two, inheritance

Inheritance refers to the fact that when CSS stylesheets are written, child tags inherit certain styles, such as text color and font size, from parent tags. To set an inheritable property, you simply apply it to the parent element.

The simple understanding is: inherit his father’s work.

CSS final execution formula: dragon born dragon, chicken born chicken, mouse born baby can make holes.

Note:

Inheritance, used properly, can simplify code and reduce the complexity of CSS styling. Child elements can inherit the style of the parent element (text-, font-, line- at the beginning of these elements can inherit, as well as the color attribute).

Priority

When defining CSS styles, it is common for two or more rules to be applied to the same element, and priority issues arise.

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

  • Inherited styles have a weight of 0. That is, in a nested structure, no matter how heavy the parent element’s style is, when the quilt element inherits, its weight is zero, which means that the style defined by the child element overwrites the inherited style.
  • Inline styles take precedence. Elements that apply the style attribute have a very high inline style weight, which can be interpreted as much more than 100. In short, it has a higher priority than any of the improved selectors above.
  • If the weights are the same, the CSS follows the principle of proximity. That is, styles near the element have the highest priority, or styles last have the highest priority.
  • CSS defines one! Important command, the command is assigned the highest priority. Which means that regardless of the weight and the distance of the pattern position,! Important has the highest priority.

Specificity

For a CSS weight, we need a set of algorithms, this is CSS Specificity, we call it CSS Specificity, it is a criteria for determining the priority of a CSS value.

Nine is denoted by a four-digit number string (CSS2 is three), more like four levels, with a value from left to right, the largest left side, one level greater than one, there is no base between digits, and no more than one level.

The contribution value of inheritance or * 0,0,0,0
Each element (tag) contributes to 0,0,0,1
For each class, the pseudo-class contribution value is 0,0,1,0
Contribution value of each ID is 0,1,0,0
Each inline style contributes values 1,0,0,0
Each! Important contribution to the value Up infinity

Weights can add up

For example:

div ul  li   ------>      0.0.0.3
	0.0.0.1
  + 0.0.0.1
  + 0.0.0.1
  -------------
    0.0.0.3There is no base between digits. For example:0.0.0.5 + 0.0.0.5 =0.0.0.10Rather than0.0.1.0So it doesn't exist10adivCan catch up with a class selector..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
 
Copy the code

The weight of inheritance is 0:

  • Let’s modify the style to see if the tag is selected
  • If selected, then the formula above is used to calculate the weights. Who listens to who.
  • If not checked, then the weight is 0, because the inherited weight is 0.

Summary priorities:

  1. Use! Important declare the rule.
  2. A declaration embedded in the style attribute of an HTML element.
  3. The ID selector rule is used.
  4. Rules for class selectors, attribute selectors, pseudo-elements, and pseudo-class selectors are used.
  5. Element selector rules are used.
  6. A rule that contains only one generic selector.
  7. Selectors of the same class follow the proximity principle.

Conclusion: Weight is the algorithm of priority, cascade is the performance of priority, the smaller the scope, the higher the priority.