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

In this article, the editor introduces in detail "how to calculate css priority". The content is detailed, the steps are clear, and the details are handled properly. I hope this "how to calculate css priority" article can help you solve your doubts.

Here is a simple unordered list:

Soda water

Beer

Fruit juice

If now you want to specify one of your favorite drinks and change its style. You can apply it by the class name on the list element.

Soda water

Beer

Fruit juice

Now you can add styles to it in css

.favorite {

Color:red

Font-weight:bold

}

Then if you look at your implementation, you will find that this style doesn't work! The drink you chose to add style did not turn red and the font was not bold.

If you look closely at the code in css, you will see that there are two selectors.

Ul#summer-drinksli {

Font-weight:normal

Font-size:12px

Color:black;}

Two different CSS selectors define the text color and font weight. There is only one declaration for font size, so it is obvious that one will take effect. These are not "conflicts", but browsers do need to decide which of these defined content needs to be implemented. This needs to be achieved by following a set of standard priority rules.

This may confuse some beginners because they have not yet completely solved the problem. They may think that because the. Favorite statement "goes further in CSS", or because the class= "text" is "closer to the actual text" in HTML, it will be preferred. In fact, the order of selectors in CSS does work, and later definitions are actually executed first when the priority is exactly the same, for example:

.favorite {

Color:red

}

.favorite {

Color:green

}

The color of the resulting font will turn green

The point here is that you want to be as specific as possible. Even with the simple examples mentioned above, you'll eventually understand that using just a class name to locate your "favorite drink" won't cut it, or even if it does work, it won't be safe. You can define it specifically using the following methods:

Ul#summer-drinksli.favorite {

Color:red

Font-weight:bold

}

This is what I mean by "specifically speaking, it makes sense". You may actually be more specific and use something like this:

Htmlbodydiv#pagewrapul#summer-drinksli.favorite {

Color:red

Font-weight:bold

}

But sometimes the code can be very long. It makes the CSS code less readable and does not produce any practical benefits. Another way to extract specific values for the ".examples" class is to use! Important statement.

.favorite {

Color:red!important

FontMutual weightRank boldweights

}

I've heard of it! Important is CSS's Jedi thinking skill. Indeed, you can force your element style by using it. However, some unnecessary problems will arise by greatly improving the particularity of the use of specific selectors. If it is misunderstood, then! Important statements are easily abused. It's best used to keep the CSS clean, for example, you know that elements with specific class selectors should use some kind of style set. Instead, it is not just used as a quick way to override the style of something, rather than figuring out how the original author constructed and used CSS.

One of my classic examples is:

.last {

Marvell rightfreuts

}

Calculate CSS selector priority

Why did we fail in our first attempt to change the color and font weight? As we know, this is because simply using the class name itself has a lower priority and is overridden by another selector that locates the unordered list with ID values. The important words in this sentence are class and id. CSS applies very different priority weights to classes and ID. In fact, ID has unlimited priority value! That is, no category can take precedence over ID.

After reading this, the article "how to calculate the priority of css" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.