Detailed analysis of CSS style inheritance and cascading

This article mainly introduces CSS style Inheritance and cascading related information. Friends in need can refer to

1:Basic selector

Tag selection: Select according to the tag name on the page, and directly apply the style to the specified tag.

Features:

1. Tag selector will select all specified tags in the current page;

2 The .tag selector has no relation to the current tag hierarchy of the code and can be selected as long as it is on the current page.

ID selection: You need to specify a tag to set the id value first (the id value cannot be repeated and is unique in the entire page).

classSelection: Give the label a class name and select the specified label through the class selector.

Two: Three sets of complex selectors

1.Descendant selectors

A. You can find subsequent sub-tags based on the tags in the current selection

B. The descendant selector can perform multi-layer precise selection

2.Intersection selector

Format: Select the first layer and select the second layer {}

Note: Points represent intersections, usually starting with a label

3. Union selection Selector

Format: first selector, second selector,...{}

Three:css inheritance property

Definition: There are some styles. When setting the current tag, it will also set its descendant tags.
Note: Tags that inherit the style and tags that define the style must It is a subordinate relationship (descendant tag relationship)
Basic attributes for text style settings can be inherited (color color\style text\font font\line attribute line)
All about the box model ( p, span, etc.) property settings (border, positioning, layout) cannot be inherited

Four: css cascading

Definition: When multiple selectors act on the same tag at the same time, the style will be applied according to priority

Selector judgment method:

-Through the weight judgment method
-Calculate the weight (ICE) through the number of id selections, class selections, and label selections in each selection
-Compare the id weights first, and then compare the categories, The last comparison tag is
- all the same comparison order

Note: If the weights are the same, the later ones will overwrite the previous ones. The premise of numerical weight is to ensure that each selector must select the specified element.

If the scope does not directly affect the label itself, it reflects the proximity principle.

important has the highest priority, * has the lowest priority

The above is the detailed content of Detailed analysis of CSS style inheritance and cascading. For more information, please follow other related articles on the PHP Chinese website!