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

    Java调优经验谈 对于调优这个事情来说,一般就是三个过程: 性能监控:问题没有发生,你并不知道你需要调优什么?此时需要一些系统.应用的监控工具来发现问题. 性能分析:问题已经发生,但是你并不知道问题 ...

  2. COM中的线程模式

      Choosing the threading model for an object depends on the object's function. An object that does e ...

  3. java设计模式之抽象工厂模式

    上一篇文章(http://www.cnblogs.com/liaoweipeng/p/5768197.html)讲了简单工厂模式,但是简单工厂模式存在一定的问题,如果想要拓展程序,必须对工厂类进行修改 ...

  4. c++关于析构的那点小事（个人吐槽向

    #include<iostream> using namespace std; class test { int *i; public: test(int n) { i = new int ...

  5. webdriver的工作原理

    selenium1的原理就是使用js来驱动浏览器,因为现在基本不用,所以不做过多讨论,下面是我整理的webdriver的工作原理,大致就是通过命令请求webdriver,然后webdriver通过浏览 ...

  6. c# winforms TextBox的记忆功能

    c# winforms TextBox的记忆功能 1:在项目上点右键  sproperties-settings 添加项目 如 MyText  类型 String 2: 获取值:   string l ...

  7. ThreadLocal用法和实现原理

    如果你定义了一个单实例的java bean,它有若干属性,但是有一个属性不是线程安全的,比如说HashMap.并且碰巧你并不需要在不同的线程中共享这个属性,也就是说这个属性不存在跨线程的意义.那么你不 ...

  8. canvas时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. offsetParent详解

    offsetParent与parentNode一样,都是获取父节点,但是offsetParent却有很大的不同之处: offsetParent找有定位的父节点,没有定位默认是body,ie7以下定位在 ...

  10. C# 内存信息

      Process proc = Process.GetCurrentProcess();                 Console.Write("专用工作集内存:");   ...