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

This article mainly introduces how to view CSS to calculate the weight of each style attribute, the article is very detailed, has a certain reference value, interested friends must read it!

The first step is to iterate through all the selectors

When rendering a HTML element, the browser first looks for all valid CSS selectors that act on the element, and for this reason, it traverses all stylesheet sources based on the specified media type (media type), including user agent (browser) styles, author styles, and user styles.

Common media type includes all/screen/print, which can be defined in the following ways:

Browser Styl

That is, the browser itself is set to display the default style of the website, and different browsers may have different stylesheets, such as Chrome, IE and Firefox, so when you use these browsers to visit the same website, the actual effect may be different.

User styl

Browsers also allow users to style web pages. For example, when we browse a website with IE, we can use the browser to view the style under the menu or the text big boy menu to set the actual display of the page.

Second, compare the importance of style attributes

In general, author style has the highest importance, followed by user style, followed by browser style, but if there is a! important tag, then the rules will be changed, through! important can increase the importance of a style and make it take precedence over all other styles that do not add the declaration. The following is the order of importance of style attributes (from highest to lowest):

1. Author style marked as! important

two。 User style marked as! important

3. Author style

4. User styl

5. Default style for browsers (user agents)

Third, compare the concreteness of style attributes (Specificity)

Concreteness can be calculated by a simplified and easy-to-use 1000 rule.

Inline style (inline styling) weight 1000

ID (# id) weight 100

Class (.class) weight 10

Tag (tag) weight 1

Then you can add the weights of multiple selectors to get the final Specificity:

P specific 1 (1 tag selector)

Div p concreteness 2 (2 tag selectors, 1x1)

Tree concreteness 10 (1 class selector)

Div p.tree concreteness 12 (2 tag selectors + 1 class selector, 1'1' 10)

# baobab concreteness 100 (1 id selector)

Body # content. Particularity 112 (tag selector + id selector + class selector + tag selector, 1 "100" 10 "1)

The complete formula for calculating the concreteness of the selector is much more complex than the above, but understanding the above rules is generally sufficient.

The fourth step is to judge the order in which the style attributes appear.

This step is the easiest, and the late selector will have a high priority, that is, the latecomer will come first.

For externally introduced stylesheets, @ import has a higher priority than link, regardless of whether it appears after the introduction of link.

Understanding the above priority calculation rules, we should be able to infer the final color of the p element in the previous example:

# introduction {color: red;}

.message {color: green;}

P {color: blue;}

Advanced HTML/CSS tutorials.

The above is all the content of the article "how to View CSS to calculate the weight of each style attribute". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.