zoukankan      html  css  js  c++  java

  • CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重

    1. 通配选择符的权值 0,0,0,0
    2. 标签的权值为 0,0,0,1
    3. 类的权值为 0,0,1,0
    4. 属性选择的权值为 0,0,1,1 0,0,1,0
    5. 伪类选择的权值为 0,0,1,0
    6. 伪对象选择的权值为 0,0,0,1
    7. ID的权值为 0,1,0,0
    8. important的权值为最高 1,0,0,0

    使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。

    从上面我们可以得出两个关键的因素：

    1. 权值的大小跟选择器的类型和数量有关
    2. 样式的优先级跟样式的定义顺序有关

    总结：

    比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：

    important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承

    这也就解释了为什么11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。

    选择器种类

    查阅资料归纳下大概有如下几种：

    • 通配选择器

    • 类型选择器

    • ID选择器

    • 类选择器

    • 包含选择器

    • 子元素选择器

    • 相邻兄弟选择器

    • 属性选择器

    css1-css3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际css开发中很少用到

    关于CSS的执行效率：

    1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
    2. 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

    Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序：

    1. 1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）

    2. 上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低

    选择器的优先权

    解释：

    1.  内联样式表的权值最高 1000；

    2.  ID 选择器的权值为 100

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

    4.  HTML 标签选择器的权值为 1

    用选择器的权值进行计算比较，示例如下：

    <html>
  <head>
    <style type="text/css">
        #redP p {
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
 
        #redP .red em {
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
 
        }
 
        #redP p span em {
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>

    结果：<em> 标签内的数据显示为蓝色。（类选择器的权值要远远大于标签选择器）

    CSS 优先级法则：

    A  选择器都有一个权值，权值越大越优先；

    B  当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

    C  创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

    D  继承的CSS 样式不如后来指定的CSS 样式；

    E  在同一组属性设置中标有“!important”规则的优先级最大；示例如下：

    <html>
  <head>
    <style type="text/css">
     #redP p{
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
     }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

    结果：在Firefox 下显示为蓝色；在IE  6 下显示为红色；

    使用脚本添加样式

    当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。代码如下：

    <html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
 
  <!-- 添加外部CSS 样式 -->
  <link rel="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 中添加样式内容的JavaScript 代码：

    var s=document.createElement("style");
var head=document.getElementsByTagName("head").item(0);
var link=document.getElementsByTagName("link").item(0);
 
head.insertBefore(s,link);
/* 注意：在IE 中，
   虽然代码是将<style>插入在<link>之前，
   但实际内存中，<style>却在<link>之后。
   这也是“IE中奇怪的应用CSS的BUG”之所在！
*/
 
var oStyleSheet = document.styleSheets[0];
//这实际是在<link>的外部样式中追加
oStyleSheet.addRule("h3","color:green;");
alert(oStyleSheet.rules[0].style.cssText);
alert(document.styleSheets[0].rules[0].style.cssText);
 
//方式2
var cssStr="h3 {color:green;}";
document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;

     

    IE 浏览器下载或者渲染的顺序可能如下：

    ●   IE 下载的顺序是从上到下；

    ●   JavaScript 函数的执行会阻塞IE 的下载；

    ●   IE 渲染的顺序也是从上到下；

    ●   IE 的下载和渲染是同时进行的；

    ●   在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）

    ●   在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，如果JS、CSS中如有重定义，后面定义的函数将覆盖前面定义的函数。

    ●   解析过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

    ●   Firefox 处理下载和渲染的顺序大体相同，只是在细微之处有些差别，例如：iframe 的渲染。
  • 相关阅读:
    SQL Server 2012本地发布、订阅及相关问题的解决方案
    微信小程序——try {} catch (e) {}
    C# .net 填充无效，无法被移除 微信小程序解密失败的解决办法
    功能测试--H5测试点
    功能测试--指纹识别测试点
    功能测试--二维码测试点
    功能测试--登录测试点
    功能测试--计步测试点
    功能测试--投票测试点
    功能测试--签到测试点
  • 原文地址：https://www.cnblogs.com/diantao/p/4363991.html
Copyright © 2011-2022 走看看