Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the role of inheritance, cascading and priority of css style". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the role of inheritance, cascading and priority of css style"?

1. Inheritance of css style:

Function: set some attributes to the parent element, and the child element can also use the

Application scenarios:

It is generally used to set some common information on the web page, such as the text color, font, text size and so on. Optimize the code and reduce the workload

Note:

1. Not all properties can be inherited,

Only attributes that begin with color/font-/text-/ line can be inherited

two。 In css inheritance, not only sons can inherit, as long as they are descendants.

Can be inherited.

3. The particularity of inheritance

3.1 A the text and color of the label and the underscore cannot inherit the parent element-for example:

Copy the code

Div {

Color:red

Font-size:24px

Text-decoration: none

}

I am the headline.

I'm a hyperlink.

I am the paragraph.

(in the above code, only p inherits the attributes set by div, while the a tag cannot inherit the attributes of the parent element, the color does not turn red, and the underscore is not removed.)

Copy the code

The text size of the 3.2h tag also cannot inherit the parent element (see the above code. I am a font-size:24px; attribute that the supertitle will not inherit in the tag, so we need to write a separate css style: H2 {font-size:24px;}.

Application scenarios:

It is generally used to set some common information on a web page, such as the text color of a web page

Font, text size lamp content

Format:

Body {attribute: value;}

2. Cascading

For example, the p tag, which sets the id and class class names for the p tag, selects the id or class class names of p and p on the selector, and sets the same attributes, which is cascading.

Priority: (Trinity)

Function: when multiple selectors (such as selecting the p tag and the id or class nickname set in the p tag), select the same tag and set the same attribute to the same tag

How to cascade is determined by priority.

two。 Three ways of priority judgment

Direct selection refers to directly selecting the tag to set the css style, and the id or class class name of the tag. (indirect selection refers to inheritance. For example, if you select the attribute in which li inherits ul, it is called inheritance attribute.)

If it is an indirect selection, whoever is closer to the target tag will listen to him.

2.2 whether it is the same selector.

If it's the same selector, then whoever writes at the end listens. (for example, set css style for two p tags

P {color:blue}

P {color:red}

Then the second p will be the standard, and the text will turn red.

2.3 different selectors

If they are all directly selected and are not the same type of selector, then the

The priority of the selector is cascaded

Id > Class > tag > wildcard > inheritance > browser default

Weight calculation

If there are direct and indirect selections in the selector. Even if the indirect selector is id selector, it will give priority to the effect of direct selection.

Thank you for your reading, the above is the "css style inheritance, cascading, priority what is the role" of the content, after the study of this article, I believe you on the inheritance of css style, cascading, priority what the role of this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.