css priority setting

In web page production, we often need to use CSS to control styles. In CSS, there are many ways to define styles, and different ways may define styles for the same element at the same time. In this case, CSS priority issues will be involved. An element may have multiple CSS style definitions, and how to determine which style will ultimately take effect requires understanding the CSS priority setting.

CSS selector priority

CSS selectors are rules used to determine which elements apply which styles. In CSS, the priority of a selector is determined by weight. Each selector has a weight value. The greater the weight value, the more priority it takes effect.

The calculation method of CSS selector weight value is:

• For each selector, a basic value is assigned according to the type of the selector and the corresponding qualifying conditions, such as: element selection The selector is 1, the class selector is 10, the ID selector is 100, and the inline style is 1000;
• For a selector sequence (multiple selectors separated by commas), the basic value of each selector is The values ​​are added to get a total;
• For each element, the basic value of the selector with the largest weight value in the matched selector sequence is used as its priority value;

Example:

<style>
    #idSelector {
        color: blue;
    }
    .classSelector {
        color: green;
    }
    div {
        color: red;
    }
</style>
<div id="idSelector" class="classSelector">Hello World!</div>

In this example, the element Hello World! satisfies the ID selector #idSelector and the class selector .classSelector, and the element selector div, then CSS will determine the final style used according to the following rules:

• The weight value of the ID selector is 100, then the #idSelector The basic value is 100; the weight value of the
• class selector is 10, then the basic value of .classSelector is 10; the weight value of the
• element selector is 1, then the basic value of div is 1;
• Then according to the rules of adding weight values, the total weight value of #idSelector is 100, the total weight value of .classSelector is 10, and the total weight value of div is 1;
• Finally , according to the selector rule with the largest priority value, the style of element <div> will apply the style in ID selector <code>#idSelector, that is, the font color will become blue .

  Importance of CSS Properties

  Sometimes, we may want some style rules to unconditionally override other style rules. At this time, we need to use the !important attribute of CSS. In CSS, !important can force a certain style rule to take effect first.

  Example:

  <style>
      p {
          color: blue !important;
      }
      .classSelector {
          color: green;
      }
  </style>
  <div class="classSelector">
      <p>Hello World!</p>
  </div>

  In this example, the P element has a color attribute applied and is forced to !important. If there is no !important tag, the P element actually applies the color attribute in .classSelector (the default is green), but due to the addition of !important, the color of the P element will be forced to be blue.

  !important tag is not omnipotent, nor can it override inline styles. When inline styles exist, even if !important is set for a selector, it will be overridden by the inline style.

  CSS inline style priority

  In HTML, inline styles are styles defined directly in HTML tag elements. Since inline styles act on a single element, inline styles always have the highest priority.

  Example:

  <div style="color: red">Hello world!</div>

  In this example, the div element uses inline style and the color is red. Even if other CSS style rules are added, inline styles will not be affected. In this example, the color of the div element must be red.

  CSS inheritance rules

  CSS inheritance rules stipulate that certain style attributes can be inherited from parent elements. When an element does not specify certain CSS property values, they are inherited from the parent element. For example, the values ​​of the two CSS properties font-family and font-size that may be frequently used can be inherited from the parent element.

  Example:

  <style>
      div {
          color: red;
      }
      .classSelector {
          font-size: 18px;
          font-family: Arial;
      }
  </style>
  <div class="classSelector">Hello world!</div>

  In this example, the div element sets the color to red and does not set the font attribute. The child element uses the font attribute of .classSelector, so the font will inherit from .classSelector, that is, the font size is 18 pixels and the font is Arial. The color will be inherited from the parent element div, which is red.

  Summary:

  Although the priority rules of CSS are a bit cumbersome, if we master them, we can better control the style. When setting the priority, we can meet our needs for the priority of certain style attributes by changing the weight of the selector and the !important attribute of the style. At the same time, we should also note that inline styles have the highest priority and will override all other style rules. CSS inheritance rules also allow us to reduce the amount of code and better maintain web page code while ensuring the consistency of style rules.