css-inheritance, Cascade, specifically

1 Why the existence of these three mechanisms (inheritance, cascade, specifically)

In a larger style sheet, there may be many rules that choose a single attribute of the same element, but each property can only be displayed according to one rule, and when a variety of rules are applied to the same property, what is the rule that the property chooses? To resolve this conflict, you need to determine the "priority" of a rule. So, CSS provides these three kinds of mechanisms

2 inheritance

Descendants can inherit the ancestor's style, for example, the body is the ancestor of all the elements, all the tags are his descendants

body {Font-family:helvetica,arial,sans-serif;}

Then, all elements in the document, regardless of the hierarchy, inherit these styles

There are many properties in CSS that can be inherited, some of which are related to text, such as color, font, and font size; however, there are many CSS properties that cannot be inherited, because the inheritance of these properties is meaningless, and the attributes that cannot be inherited mainly relate to the positioning and display of the element boxes, such as borders, margins, padding, etc.

3 Stacking

Cascading is the process of layering layers in a document hierarchy to allow a browser to face multiple sources of a particular property value of a tag, and determine which value to use eventually

3.1 Style sources

A, the browser has a default style sheet

b, user can provide style sheet

C, author style sheet (style sheet written by web designer)

Browser cascade The order of each source style:

• Browser Default Style sheet
• User style Sheet
• Author Link style sheet
• Authors embed style sheets
• Author inline style sheet

The browser examines each source's style in the order listed above, and, if defined, updates the setting for each tag property value. After the entire check update process is finished, each label is displayed in the final set of style sheets, and the following style overrides the previous style

3.2 Cascading rules

3.2.1 Specificity degree (specificity) indicates how clear a rule is

Calculate the specified degree:

I-c-e

1. There is an ID in the selector, which adds 1 to the position of I;
2. There is a class in the selector that adds 1 to the position of C;
3. There is an element (label) name in the selector, plus 1 on the position of E.

Get a three-digit number, but do not simply compare it as a number, such as 0-1-12 and 0-2-0, the specificity of 0-2-0 is higher

Weight of the 3.2.2 Declaration

p {color:green!important;font-size:12pt;}

The Space!important semicolon (;) the weight used to aggravate the declaration.

Weight statement weights, that is, apply this style ~ No matter if there are other styles with higher precedence (use caution ~)

3.2.3 Cascading rules

1. The selector containing the ID > the selector for the containing class > The selector that contains the tag name
2. Inline style > Embed style > Link style
3. The style that you set is better than the inherited style, at which point you don't have to consider

css-inheritance, Cascade, specifically