CSS style inheritance and cascading

This article mainly introduces relevant information about CSS style inheritance and cascading. Friends who need it can refer to it

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. The tag selector will select all specified tags in the current page;

2. The tag selector will select the code There is no association with the current tag hierarchy. As long as it is on the current page, it can be selected.

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).

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

2: 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: Point represents intersection, usually starting with a label

3. Union selector

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

3: css inheritance

Definition: There are some styles. When setting the current tag, its descendant tags will be set at the same time.
Note: The tags inherited from the style and the tags that define the style must be subordinate (descendant tag relationship)
Yes Only the basic attributes of text style settings can be inherited (color color\style text\font font\line attribute line)
All attribute settings (border, positioning, layout) for the box model (p, span, etc.) cannot be inherited Inheritance

Four: css cascading

Definition: When multiple selectors act on the same tag at the same time, they will be selected according to the priority level To carry out the style effect

The method of judging the selector:

-Through the weight judgment method
-Through each selection, id selection, class selection, Select the number of tags to calculate the weight (ICE)
-Compare the id weight first, then compare the class, and finally compare the tag
-All in the same comparison order

Note: If the weights are the same, then The back covers the front. 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 CSS style inheritance and cascading. For more information, please follow other related articles on the PHP Chinese website!