计算指定选择器的优先级:重新认识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 的渲染。

CSS选择器优先级 CSS权值的更多相关文章

  1. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  2. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  3. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  4. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  5. CSS选择器优先级（转）

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  6. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  7. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

  8. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  9. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

随机推荐

  1. iNeedle产品介绍

    一.产品简介 1.产品背景 1.您曾经遇到过下面的问题和烦恼吗?2.当网站上线以后,如何实时的了解网站的运行状况?3.当网站访问速度慢,是升级服务器?还是升级带宽?还是优化网站代码?4.当网站新上线一 ...

  2. linux进程间通信-信号量（semaphore）

    一 为什么要使用信号量 为了防止出现因多个程序同时访问一个共享资源而引发的一系列问题,我们需要一种方法,它可以通过生成并使用令牌来授权,在任一时刻只能有一个执行线程访问 代码的临界区域.临界区域是指执 ...

  3. Android图片开发内幕--基础篇

    前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...

  4. Java入门（二）——果然断更的都是要受惩罚的。。。

    断更了一个多月,阅读量立马从100+跌落至10-,虽说不是很看重这个,毕竟只是当这个是自己的学习笔记,但有人看,有人评论,有人认同和批评的感觉还是很巴适的,尤其以前有过却又被剥夺的,惨兮兮的. 好好写 ...

  5. 谈谈Lucene和Solr索引存目录

    在Lucene中,有几种索引存放模式呢?用过的人可能记得SimpleFSDirectory.MMapDirectory.NIOFSDirectory.RAMDirectory这四种.新版本的通过FSD ...

  6. Stanford机器学习笔记-6. 学习模型的评估和选择

    6. 学习模型的评估与选择 Content 6. 学习模型的评估与选择 6.1 如何调试学习算法 6.2 评估假设函数(Evaluating a hypothesis) 6.3 模型选择与训练/验证/ ...

  7. Google Play笔记之上架

    我最近负责Google Play上架的主要工作 ,现已进入开放测试阶段(随后就可全球首发~~).接入工作已完成,这篇记录一下上架后期的笔记. 开放测试 开放测试是指对所有玩家进行开放式测试,玩家可以通 ...

  8. Nginx负载均衡配置

    1.yum安装nginx yum install nginx 2.启动nginx chkconfig nginx on   service nginx start向web服务器中放入测试文件: < ...

  9. 比较全的JavaScript倒计时脚本[xyytit]

    需要做一个功能,给特定的活动或者商品添加一个倒计时提示,在网上找了好些方法,总结了比较好的一些方法,以备后用: 1. 比较长时间的倒计时(如:距离2014年还有0年, 0月, 30天, 9小时, 41 ...

  10. javascript时间的一些问题

    1.求当前时间. var curDate = new Date(); 2.求当前时间的前一天 var preDate = new Date(curDate.getTime()-24*60*60*100 ...