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

This article mainly explains the "what is the use of css weight", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in depth, together to study and learn "what is the use of css weight"!

CSS weight refers to the priority of styles, which determines how css rules are parsed by browsers until they take effect; when two or more styles act on an element, the style with high weight works on the element, and if the weight is the same, the later style will overwrite the previous style.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS weight refers to the priority of styles. There are two or more styles acting on an element. The style with high weight works on the element. If the weight is the same, the style written later will overwrite the style written before.

Weights determine how your css rules are parsed by browsers until they take effect. "css weights are related to how your css rules are displayed."

When many rules are applied to an element, weight is a process of determining which rule takes effect, or priority.

Each selector has its own weight. Each of your css rules contains a weight level. This level is weighted by different selectors, and through weight, different styles will eventually be applied to your page.

If two selectors act on an element at the same time, the one with high weight takes effect.

Basic rules of weight

1. Same weight: take the selector that appears later as the last rule (for example, write the same two styles # content H2 {color:red})

2. Different weights will take effect if the weight value is high.

3 、! Important (infinitely large) > inline style (weight 1000) > id selector (weight 1000) > class selector (10) = pseudo class selector (10) = attribute selector (10) > element selector (1) > generic selector (0) > inherited style > browser default style.

4. Element selector addition is never as important as class selector.

The selector may contain one or more calculation points related to the weight. If the calculated weight value is larger, the selector is considered to have a higher weight.

Css weight calculation

If multiple different types of selectors style an object at the same time, here is a simple calculation of how the object will display the final style. They all have a priority weight for regular selectors, as described below.

Tag selector: the priority weight is 1.

Pseudo-element or pseudo-object selector: the priority weight is 1.

Class selector: the priority weight is 10.

Attribute selector: the priority weight is 10.

ID selector: the priority weight is 100.

Other selectors: priority weighting value is 0, such as wildcard selector.

Then, the total number of weighted values of the selector in each style is calculated using the above weighted values as the starting point. The rules of calculation are as follows:

Count the number of ID selectors in the selector and multiply it by 100.

Count the number of class selectors in the selector and multiply it by 10.

Count the number of tag selectors in the selector and multiply it by 1.

According to this method, finally, by adding all the weighted values, we can get the total weighted value of the current selector, and finally determine which style has the highest priority according to the weighted value.

For a compound selector composed of multiple selectors, the weighting value of each selector is calculated separately, and then the total score of the current selector is calculated. Finally, according to the value of the selector, the higher the score, the higher the priority. Then the style it sets will be applied.

If the score is the same, it is judged according to the position relationship, and the style close to the object should have a high priority.

[example] use different composite selectors to set style properties for the same element through embedded styles, and compare them with priority rules to get the final style property values.

CSS style priority div {margin: 0 auto; / * div centered * / text-align: center; / * text centered * /} .Cent {width: 400px; / * set width, otherwise the effect will not be seen in the center * / border: 1px dashed # CC0099; / * category selector sets border lines * / padding: 10px 15px; / * set spacing * /} # imp {border: 1px dashed # 3366FF / * ID selector sets border * /} .Cent {font-size: 14px; / * category selector sets font size * /}. Cent p {font-size: 16px; / * category selector and tag selector set font size * / font-weight: bold; / * font bold * /}. Cent. Duanluo {font-weight: font / * two category selector settings to cancel the bold effect * / line-height:1.5em; / * paragraph lines * / text-align:left; / * text left alignment * /}. Cent .duanluo span {color:#009966; / * compound selector setting font color * /} # imp span {color:# 669933; / * definition of ID selector and tag selector * / font-weight: bold / * bold font * / font-size:22px; / * font 22 pixels, where to compare * /} span {font-size: 30px important; / * tags use the highest priority! important command * /} span {font-size: 40px;! Important / * wrong handwriting! location of the important command * /} CSS (Cascading Style Sheet, which can be translated as "cascading style sheet" or "cascading style sheet") is a set of formatting rules that control the appearance of Web pages. By formatting the page using CSS styles, you can separate the content of the page from the presentation. The content of the page is stored in the HTML document, while the CSS rules that define the presentation are stored in another file or in some part of the HTML document, usually the header. Separating content from presentation not only makes it easier to maintain the appearance of the site, but also makes the HTML document code more concise and shortens browser load time.

The effect of the page is shown in the following figure.

In the above example, to view the browser effect and analyze the code step by step, you need to pay attention to the test: at each step of the test, the later code needs to be deleted, so the browser displays the results many times, and displays the results in the browser at each step.

Step 1

To center the browser, set the element center attribute margin: 0 auto;, and the text center attribute text-align:center; for the div tag.

Div {margin: 0 auto; text-align: center;}

Step 2

The Cent layer sets the width to 400 pixels, and if there is no width setting, the centering on the browser will not work, then set the inner spacing in four directions, and finally set the 1 pixel color to the pink dashed border.

.Cent {width: 400px; border: 1px dashed # CC0099; padding:10px 15px;}

Step 3

The Cent layer is referenced by the ID value, and the 1-pixel color is defined as a pink-blue dashed border, according to the priority rules introduced earlier: 10 points for the class selector, 100 points for the ID selector, and the final border color is blue.

If you reverse the order defined by the category selector Cent layer and the ID selector # imp (shown below), the final result is still blue because the ID selector takes precedence over the class selector.

.Cent {width: 400px; border: 1px dashed # CC0099; padding: 10px 15px;} # imp {border: 1px dashed # 3366FF;}

Step 4

.Cent {} defines a font size of 14 pixels, while .Cent p {} defines a font size of 16 pixels. According to the priority rules described earlier: class selector 10, tag selector 1, then .Cent {} is 10, .Cent p {} = 1031 = 11, so the end result is a paragraph font size of 16 pixels and bold font display.

.Cent {font-size: 14px;} .Cent p {font-size: 16px; font-weight: bold;}

Step 5

Add the class name duanluo in the Cent layer to define the font no longer bold display, line height 1.5em, text left alignment, the previous step of bold setting if the font size is invalid, then view the bold results, the line height setting uses relative units, which can avoid font size changes and affect the distance between the original paragraph text.

The tag within the paragraph sets the font color to # 009966, while the ID value sets the font color to # 669933. According to the priority rules described earlier: class selector 10, tag selector 1, ID selector 100, so the .Cent. Duanluo span score = 10: 10: 1 = 21, while the # imp span score = 100: 1 = 101, the final font color is # 669933.

.Cent .duanluo {font-weight:normal; line-height:1.5em; text-align:left} .Cent .duanluo span {color:# 009966;} # imp span {color:#669933; font-weight:bold; font-size:22px}

Step 6

When setting the paragraph font size, the final .cent p font size is set for the browser to display the result: 16 pixels, and when the font size is defined through the ID selector, the font size changes to 22 pixels.

The font size is set to 30 pixels through the! important command, because the! important command has unlimited permissions, that is, the score value is high, and the provisional value is 1000, so the # imp span score is 101, which is less than the! important command value of 1000, and the final result is 30 pixels.

If span {font-size:30px! important;} and # imp span {font-size:5Opx! important } to compare, according to the priority rules described earlier: ID selector 100 points, tag selector 1 point,! important command value 1000, so span {} score 1000 (internal attributes! important) + 1 (tag selector) = 1001, and # imp span score 1000 (internal attributes! important) + 100 (ID selector) + 1 (tag selector) = 1101.

The important command is miswritten once and the font size is defined to 40 pixels. Through the browser, it is found that the! important command is placed between the declaration statement and the semicolon, otherwise it is invalid.

.Cent p {font-size: 16px;} # imp span {color:#669933; font-weight:bold; font-size:22px} span {font-size: 30px! important;} span {font-size: 40px ! important} / * wrong writing method * / Thank you for your reading, the above is the content of "what is the use of css weight". After the study of this article, I believe you have a deeper understanding of the use of css weight, and the specific use 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.