preface

CSS weight a lot of people have heard, also understand some, but many people on the specific rules or again as deep as some questions about CSS weight, may not be so clear. Daily development, more or less will encounter CSS rules do not take effect, in order to enable us to reduce the time of debugging CSS rules, a deep understanding of CSS weight, is very critical. If you like, you can click Bozam/follow, support, hope you can have a harvest after reading this article.

Personal blog: obkoro1.com

Summary of weight rules:

  1. ! Important has the highest priority, but is overridden by important with the highest weight
  2. Inline styles always override any style from an external stylesheet (except! important)
  3. CSS rules cannot be enforced across levels when using a single selector
  4. If two selectors with different weights apply to the same element, a CSS rule with a high weight takes effect
  5. If two selectors of the same weight act on the same element: the selector that follows is the last rule.
  6. Selectors that are close to the element take effect if the weight is the same

What are CSS weight priorities for?

If one or more CSS rules are declared in the same element in different ways, the browser determines which declaration is most relevant to the element and applies all CSS rules declared in this declaration to the element.

The five grades of weights and their weights

  • ! important;

  • Inline style;

  • ID selector, weight :100;

  • Class, property selector and pseudo-class selector, weight :10;

    Attribute selectors are used to select elements based on their attributes and their values, such as the Button's Type attribute. Pseudo class selector: :active: Focus and other options.Copy the code

  • Tag selector and pseudo-element selector, weight :1;

    Pseudo-element selector: :before :afterCopy the code

Hierarchical relationship:

! Important > inline style > ID selector > class selector | attribute selectors | pseudo class selector > element selectorCopy the code

Weight rules:

1. Not recommended! important

Not recommended! Important, because! Important has no structure or context at all, and many times the weight problem is because I don’t know where to define one! Important.

Covers important:

Although we should try to avoid using them! Codepen: Important, but you should know how to override important

/ /! <button id="a" class="a">aaa</button> #a{background: blue! important; /* id important overriding class important*/}. A {background: red! important; }Copy the code

2. Inline styles will always override any style in the external stylesheet, which will be! importantcover

3. If a single selector is used, CSS rules cannot take effect across levels

No matter how many classes there are, none of the ID selectors has a high weight. Similarly, no selector with any number of elements has as much weight as a class selector, and no selector with any number of ids has as much weight as an inline style selector.

Codepen demo;

In the demo, 11 classes are used to form a selector, and finally an ID selector.Copy the code

Can imagine the kind of hierarchy in the fantasy novel, without breaking through that level, there is no comparison.

So the weight is when the two sides are at the same level, then the comparison starts.

4. If two selectors with different weights apply to the same element, the CSS rule with a higher weight takes effect

The selector may contain one or more calculation points related to the weight. If the weight value calculated by the weight value is larger, the weight of the selector is considered to be higher. Here’s a simple chestnut:

.test #test{ } // id 100+class 10=110; .test #test span{} // id 100+class 10+span 1=111; .test #test .sonClass{} // id 100+class 10+class 10=120; / / to take effectCopy the code

5. If two selectors of the same weight apply to the same element: the following selector is the last rule.

demo

<div class="test" id="test"> <span > </span> </div> </div> #test span{color:blue; } #app span{color: red; }Copy the code

6. Selectors that are close to the element take effect if the weight is the same

For example, different style table, head, etc.

#content h1 {// CSS style sheet padding: 5px; } <style type="text/ CSS "> #content h1 {// padding: 10px; } </style>Copy the code

Advice:

  1. Avoid the use of! important;
  2. Use ID to increase selector weight;
  3. Reduce the number of selectors (avoid layer nesting);

conclusion

This is the content of the CSS weight, if there is a wrong place welcome to correct! Hope you can have a harvest after watching, if you like it, click on the wave to subscribe to follow/like.

I hope the friends can click like/follow, your support is the biggest encouragement to me.

Personal blog and nuggets personal homepage, if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions.

If you like this article, please follow my subscription number, long technical road, looking forward to learning and growing together in the future.

The above 2018.5.19

References:

Some things you should know – CSS weights

Go deep into CSS priorities

CSS priority