CSS Selector Priority

Browsers determine which attribute values are most relevant to an element by judging the CSS priority, and then apply it to the element. The reasonable composition rules of CSS selectors determine the priority. We often use selector priority to reasonably control elements to achieve our ideal display state. Let's take a closer look at CSS selector priority and weight.

How are CSS selectors calculated?

When CSS selectors have the same weight, the last declared CSS selector overrides the earlier one.
CSS priority is calculated based on the cascade string composed of each selector type, it is not a weight value corresponding to the corresponding matching expression.
For the same CSS expression, the distance in the DOM structure will not affect the element priority calculation.

CSS Precedence Order

Here is a list of selectors in increasing order of precedence:

Universal Selectors
Element (Type) Selectors
Class Selectors
Attribute Selectors
Pseudo-classes
ID Selectors
Inline Styles

Multiple Styles

Multiple styles are when external, internal, and inline styles are applied to the same element at the same time.

Generally, the priority is: (External style) External style sheet < (Internal style) Internal style sheet < (Inline style) Inline style

There is an exception, that is, if the external style is placed after the internal style, the external style will cover the internal style.

The following is an example:

<head>< /li>
 <style  type="text/css"> ;
 h3{color:green;}
  </style>
< span class="pln"> <!-- External style style.css -->
< span class="pln"> <link rel="stylesheet"type= "text/css"href="style.css"/>
 < ;!-- Settings: h3{color:blue} -->
</head>< /li>
<body>
 <h3>welcome sojson.com</h3>
< li class="L0"></body>

Selector precedence explained

Inline style sheets have a priority of up to 1000.
ID selectors have a priority of 100.
Class class selectors have a priority of 10.
HTML tag (type) selectors have a priority of 1.

<html>
  <head>
   <style type="text/css">
      #redP p {
          color:#F00;
      }
      #redP .red em {
          color:#00F;
      }
      #redP p span em {
          color:#FF0;
      }
   </style>
  </head>
  <body>
     <divid="redP">
        <pclass="red">red
          <span><em>em red</em></span>
       </p>
        <p>red</p>
     </div>
  </body>
</html>

CSS precedence rules:

Selectors have a weight, the larger the weight, the higher the priority.
When the weights are equal, the style sheet settings that appear later will take precedence over the style sheet settings that appear earlier.
Author's rules take precedence over browser's: that is, the CSS styles set by the web page author have a higher priority than the styles set by the browser.
Inherited CSS styles are inferior to CSS styles specified later
Rules marked with "!important" have the highest priority in the same set of property settings.

CSS `!important` rule example:

<html>
 <head>
   <style type="text/css">
    #redP p{
       color:#00f !important;
       color:#f00;
    }
   </style>
 </head>
 <body>
    <divid="redP">
      <p>color</p>
      <p>color</p>
    </div>
 </body>
</html>

Use scripts to add styles:

When you use a JavaScript script to insert an internal style after connecting to an external style (i.e. the internal style is created using a script), the IE browser behaves differently. The code is as follows:

 
<html>
<head>
 <title> demo </title>
 <metaname="Author"< /span>content="xugang" />
 <!-- Add external CSS styles-->
 <linkrel="stylesheet"href ="styles.css"type= "text/css" />
 <!-- In the external styles.css file, the code is as follows:
 h3 {color:blue}
 -->
 <!-- Use javascript to create internal CSS Styles -->
 <script type="text/javascript">
  <!--
   (function(){
      var agent = window.navigator.userAgent.toLowerCase();
      var is_op = (agent.indexOf("opera") != -1);
      var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;
      var is_ch = (agent.indexOf("chrome") != -1);
 
      var cssStr="h3 {color:green;}";
      var s=document.createElement("style");
      var head=document.getElementsByTagName("head").item(0);
      var link=document.getElementsByTagName("link");
      link=link.item(0);
 
      if(is_ie)
      {
         if(link)
            head.insertBefore(s,link);
         else
            head.appendChild(s);
         document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
      }
      else if(is_ch)
      {
         var t=document.createTextNode();
         t.nodeValue=cssStr;
         s.appendChild(t);
         head.insertBefore(s,link);
      }
      else
      {
         s.innerHTML=cssStr;
         head.insertBefore(s,link);
      }
   })();
  //-->
  </script>
</head>
<body>
  <h3>在IE中我是綠色，非IE瀏覽器下我是藍色！</h3>
</body>
</html>

The order of CSS rendering in IE browser may be as follows

IE downloads from top to bottom;
The execution of JavaScript functions will block the download of IE;
IE also renders from top to bottom;
IE downloads and renders at the same time;
When rendering to a certain part of the page, all the parts above it have been downloaded (but it does not mean that all related elements have been downloaded.)
During the download process, if a tag is embedded in a file, and the file is semantically interpreted (for example: JS script, CSS style), then IE's download process will enable a separate connection for downloading. And after downloading, it will be parsed. If there is a redefinition in JS or CSS, the function defined later will overwrite the function defined earlier.
During the parsing process, stop downloading all the elements below the page. The style sheet file is special. After it is downloaded, it will be parsed together with all the previously downloaded style sheets. After the parsing is completed, all the previous elements (including those that have been rendered before) will be re-rendered. And the rendering will continue in this way until the entire page is rendered.
Firefox handles downloading and rendering in much the same order, with some minor differences, such as the rendering of iframes.