weight=1+100+10+ 10=121/” can be used to calculate the weight."/> weight=1+100+10+ 10=121/” can be used to calculate the weight.">

Home >Web Front-end >Front-end Q&A >How to calculate css weight

How to calculate css weight

藏色散人
藏色散人Original
2020-12-08 09:35:235253browse

Css weight calculation method: First create an HTML sample file; then pass "div#app.child[name="appName"] /a=1,b=2,c=1—> weight =1 100 10 10=121/” can be used to calculate the weight.

How to calculate css weight

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommendation: "css video tutorial"

CSS weight is determined by four values. It is easier to explain by looking at a picture:

How to calculate css weight

The picture is in English. I will translate it and explain it separately. The definitions of the four levels are as follows:

First level: inline style, such as: style="color:red; ", the weight is 1000. (This method will make the css difficult to manage, so it is not recommended)

Second class: ID selector, such as: #header, the weight is 0100.

Third level: class, pseudo-class, attribute selector such as: .bar, weight is 0010.

Fourth level: label, pseudo-element selector, such as: div::first-line weight It is 0001.

Finally, add these values ​​up, and then it is the weight of the current element.

Others:

Attributes with unconditional priority only need to use !important after the attribute. It overrides element styles defined anywhere within the page. (There are some bugs in ie6 support).

Wildcards, sub-selectors, adjacent selectors, etc. For example, *, >, , the weight is 0000. The style inherited by

has no weight.

CSS weight calculation method

Calculate the number of ID selectors in the selector (=a)

Calculate the sum of classes, attributes and Number of pseudo-class selectors (=b)

Calculate the number of tags and pseudo-element selectors in the selector (=c)

Ignore global selectors

In respectively After calculating the values ​​of a, b, and c, connect the three numbers abc in order to form a new number. The changed value is the calculated weight of the selector. If the calculated weight values ​​of two selectors are the same, the "nearest principle" is adopted.

Example:

div#app.child[name="appName"] /a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121/

The above is the detailed content of How to calculate css weight. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn