This is the 10th day of my participation in the August Text Challenge.More challenges in August

About weights in CSS

In our daily learning, have you carefully thought about CSS style rules is what it looks like, why I wrote this style will not be displayed on the web page, this is related to the weight, so what is the weight?

CSS weight refers to the priority of cSS6 basic selectors. CSS styles with a higher priority will override CSS styles with a lower priority. The higher the priority, the higher the weight, and vice versa.

Generally in our cognition! The weight of important is maximum, and the id selector is heavier than the class selector

priority

The browser uses priority to determine which attribute values are most relevant to an element and then applies them to that element. Priority is a matching rule based on different kinds of selectors.

What are the priorities?

The priority is a weight assigned to the specified CSS declaration, determined by the value of each selector type in the matched selector

If the two declarations have the same priority, the last one is applied directly to the element

Priorities only make sense when there are multiple declarations for the same element

It depends on the size of your value. In general, the comparison looks like this:

! Important > inline style (style = “” > ID selector (. Box) > class selector # (box) > tag selector (h1) | pseudo-classes (: hover) | attribute selectors/type =” radio “> false object > > inheritance wildcards (*)

Wildcard selector ([*]) selector ([+], [>], [~], [‘ ` ` ‘], [| |]) and negative pseudo-classes (negation pseudo – class) ([: not ()]) has no effect on priority. (However, the selector declared inside :not() affects the priority).

According to the W3 standard, CSS selectors are divided into four types: A, B, C, and D

  • a:If the CSS property declaration is written instyle="", the number is 1, otherwise, 0
  • B: Number of ID selectors
  • c:Class selectors, property selectors (e.gtype='text'), pseudo-class selectors (e.g.::hoverThe number of)
  • d:Label name (e.g.p.div), pseudo classes (e.g.:beforeThe number of)

When comparing the weights of different CSS selectors, they are compared in the order a-B-C-D.

Inline styles added to elements (for example, style=”font-weight:bold”) always override any styles from the external stylesheet and are therefore considered to have the highest priority. (then! Important?)

! Important exception rule

When using a! The important rule overrides any other declarations. Although, technically speaking,! Important has nothing to do with priority, but it is directly related to the end result. Use! Important is a bad habit and should be avoided because it breaks the inherent cascading rules in stylesheets and makes debugging to find bugs more difficult. When two conflicting bands! When the declaration of the important rule is applied to the same element, the declaration with a higher priority will be adopted.

Some rules of thumb:

  • A certainPrioritize using style rules to solve problems rather than! important
  • onlyUse in specific pages where you need to override site-wide or external CSS! important
  • Don’t everUse it in your plugin! important
  • Don’t everUsed in site-wide CSS code! important

Pay attention to the point

It’s very misleading to say that 10 class selectors == 1 ID selector

Because the value of 10 class selectors is 10 * 10 = 100

So let’s demonstrate that

 <div id='testId' class="testClass"></div>
Copy the code
 #testId {
     background-color: red
 }
 ​
 .testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass {
     background-color: pink
 }
Copy the code

It turns out to be red, which means the top addition doesn’t work

This is an explanatory picture I found on a foreign website

In fact, each of these digits is 256 bits, not binary

That is, 0-1-0 of the class selector is equal to 1-0-0 of the ID selector

You need 256 class selectors to have the same weight as an ID selector

\