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

Front-end talk: CSS weight (Specificity)

I'm sure you've all heard of css weight, and most people know some simple rules:

Longer css selector weights will be greater than shorter css selector

The weight of id selector is higher than class selector.

But what are the specific specifications? According to what criteria does the browser determine the weight of different selectors?

Let's take a look at what the official document says.

The first key word: Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors

Specificity: specificity is used in official documentation to indicate the correlation between a css selector and its elements. The stronger the correlation, that is, the highest weight.

So the question is, how is Specificity compared?

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

Specificity is determined by the number of different selector type in the selector.

The second key word: Selector Type

According to the provisions of W3 standard, css selector is divided into four kinds of type: a, b, c, d. The rules for calculating their numbers are:

A: if the css attribute declaration is written in style= "", the number is 1, otherwise it is 0

B: number of id selectors

C: number of class selectors, attribute selectors (such as type= "text"), pseudo-class selectors (e.g.:: hover)

D: number of label signatures (e.g.: P, div) and pseudo classes (e.g.:: before)

When comparing the weights of different css selector, they are compared in the order of a = > b = > c = > d.

From the calculation rule of the first selector type a, we can see that the css written in the style attribute of the html code has the highest priority over the css attribute written in the css selector.

Id selector (b) has a higher priority than class selector (c). This is also consistent with our usual experience.

There are some css selectors you didn't mention, how do you calculate their weights?

In addition to the css selector type in the above Specificity calculation rules, there are also some selectors such as: *, +, >,: not (), etc. How do you calculate the weights of these selectors?

The answer is that these selectors are not counted in the weight of css:)

There is a selector to pay special attention to:: not (), although it itself is not weighted, but the css selector written in it needs to calculate the weight.

What should I do if the calculations are all the same for a _ r _ b _ m _ c _ D?

The default behavior is that when the specificity is the same, the last declared css selector will take effect.

If I repeat the same css selectory type, will the weight increase?

Let's do an experiment where we declare a html node:

Test div

In css, we add two selectors:

.testClass.testClass {background-color: red;}. TestClass {background-color: black;}

If the duplicate css selector is ignored, according to the previous rule, the last declared css selector will take effect, so the background color of the div node should be black. Let's look at the results:

As a result, we get a red div, that is, .testClass.testClass is higher than .testClass. So the conclusion is that the weight of repeated css selector will be calculated repeatedly.

About! important:

According to MDN,! important is not within the weight calculation of the css selector, and it makes the css selector work because the browser makes a special judgment when it encounters! important. When more than one! important needs to be compared, its weight is calculated and then compared.

Generally speaking, the use of! important. If you think you must use it, you might as well check yourself first:

Always consider using the heavier css selector first instead of using! important

Use important in the page scope only if your goal is to cover css from third parties (e.g. Bootstrap, normalize.css).

Never use it when you write a third-party plug-in! important

Never use it all over the station! important

Some misleading information

When I was searching for information about the weight of css, I saw the following picture, which seems to be very reasonable, but it is actually wrong!

Let's do a simple test:

According to the formula in the picture: if one css selector contains 11 class selector type, the other selector is 1 id selector type. Then the weight of the class selector will be higher than that of the id selector. Let's have a try:

.testClass.testClass.testClass.testClass.testClass.testClass .testClass.testClass.testClass.testClass.testClass {background-color: red;} # testId {background-color: black;}

Let's look at the results:

The result shows that the weight of id selector is higher.

Although we rarely have more than 10 class in the actual coding process, if it does, we can only deal with it correctly if we know the real rules of weight calculation and comparison.

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.