JSON在线解析

CSS选择器优先级

浏览器是经过过程断定CSS优先级,来决定究竟哪些属性值是与元素最为相干的,从而感化到该元素上。CSS选择器的公道组陈规矩决定了优先级,我们也常经常使用选择器优先级来公道控制元素达到我们幻想的显示状况,下面我们来详细懂得下CSS选择器优先级及权重。

CSS选择器若何计算?

  1. 当CSS选择器权重雷同,则最后的声明的CSS选择器覆盖靠前的 CSS。

  2. CSS优先级是根据由每种选择器类型构成的级联字串计算而成的,它不是一个对应照应婚配表达式的权重值。

  3. 雷同CSS表达式,在DOM构造中的间隔是不会对元素优先级计算产生影响的。

CSS优先级次序

以下是一份优先级逐级增长的选择器列表:

  1. 通用选择器

  2. 元素(类型)选择器

  3. 类选择器

  4. 属性选择器

  5. 伪类

  6. ID 选择器

  7. 内联款式


多重款式(Multiple Styles

假设外部款式、外部款式和内联款式同时应用于同一个元素,就是使多重款式的情况。

普通情况下,优先级为:(外部款式)External style sheet <(外部款式)Internal style sheet <(内联款式)Inline style

有个例外的情况,就是假设外部款式放在外部款式前面,则外部款式将覆盖外部款式。

示例以下:

<head>
   <style type="text/css">
     
     h3{color:green;}
   </style>
 
   <!-- 外部款式 style.css -->
   <linkrel="stylesheet"type="text/css"href="style.css"/>
   <!-- 设置:h3{color:blue} -->
</head>
<body>
    <h3>welcome sojson.com</h3>
</body>

成果:点击我看下面的成果


选择器的优先权

选择器优先权

选择器的优先权解释解释

  1. 内联款式表的权值最高 1000。

  2. ID 选择器的权值为 100。

  3. Class 类选择器的权值为 10。

  4. HTML 标签(类型)选择器的权值为 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>

成果:<em> 标签内的数据显示为蓝色:点击我看下面的成果


CSS 优先级规矩:

  1. 选择器都有一个权值,权值越大年夜越优先。

  2. 当权值相等时,后出现的款式表设置要优于先出现的款式表设置。

  3. 创作者的规矩高于浏览者:即网页编写者设置的CSS 款式的优先权高于浏览器所设置的款式。

  4. 持续的CSS 款式不如后来指定的CSS 款式

  5. 在同一组属性设置中标有“!important”规矩的优先级最大年夜。

CSS !important 规矩实例:
<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>

成果:在Firefox 下显示为蓝色;在IE6 下显示为白色点击我看下面的成果


应用脚本添加款式:

当在连接外部款式后,再在厥前面应用JavaScript脚本拔出外部款式时(即外部款式应用脚本创建),IE 浏览器就表示出它的另类了。代码以下:

<html>
<head>
  <title> demo </title>
  <metaname="Author"content="xugang" />
 
  <!-- 添加外部CSS 款式 -->
  <linkrel="stylesheet"href="styles.css"type="text/css" />
  <!-- 在外部的styles.css文件中,代码以下:
       h3 {color:blue}
  -->
 
  <!-- 应用javascript 创建外部CSS 款式 -->
  <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>

成果:在Firefox / Chrome / Safari / Opera 中,文字都是蓝色的。而在IE 浏览器中,文字倒是绿色的。 :点击我看下面的成果

IE 浏览器下CSS衬着的次序能够以下

  1. IE 下载的次序是从上到下;

  2. JavaScript 函数的履行会阻塞IE 的下载;

  3. IE 衬着的次序也是从上到下;

  4. IE 的下载和衬着是同时停止的;

  5. 在衬着到页面的某一部分时,其下面的一切部分都曾经下载完成(但其实不是说一切相接洽关系的元素都曾经下载完。)

  6. 鄙人载过程当中,假设碰到某一标签是嵌入文件,并且文件是具有语义解释性的(例如:JS脚本,CSS款式),那么此时IE的下载过程会启用伶仃连接停止下载。并且鄙人载落先行解析,假设JS、CSS中如有重定义,前面定义的函数将覆盖前面定义的函数。

  7. 解析过程当中,停止页面一切往下元素的下载。款式表文件比较特别,在其下载完成后,将和之前下载的一切款式表一路停止解析,解析完成后,将对此前一切元素(含之前曾经衬着的)重新停止款式衬着。并以此方法一向衬着下去,直到全部页面衬着完成。

  8. Firefox 处理下载和衬着的次序大年夜体雷同,只是在纤细的地方有些差别,例如:iframe 的衬着。

声明

以后资本,是在搜集资本中优化,和整顿和排版,部分真实性曾经校验,由于触及到浏览器的版本一向在升级,故请同窗点击测试成果对应查算作果并参考。