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

This article mainly introduces css how to maintain the low weight of the selector, the article is very detailed, has a certain reference value, interested friends must read it!

Keep the weight of the selector low

Not all css selectors are equal. When I first learned CSS, I always thought that the selector would cover everything on it. However, this is not the case, as we illustrate in the following example:

HTML

Button

CSS

A {color: # fff; padding: 15px;} a#blue-btn {background-color: blue;} a.active {background-color: red;}

We hope that the style set in the .active class will take effect so that the button turns red. But it doesn't work because the button has an ID selector on it, which also sets the background-color,ID selector to have a higher weight, so the button's color is blue. The weight size of the selector is as follows:

ID (# id) > Class (.class) > Type (for example, header)

The weights will also be superimposed, so the weight of a#button.active is higher than that of a#button. Using a high-weight selector from the beginning will cause you to continue to use a higher-weight selector in later maintenance, and eventually choose to use it! important, which is highly deprecated

The above is all the content of the article "how to keep the weight of the selector low in css". 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.