计算指定选择器的优先级:重新认识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. iOS 解决导航栏左右 BarButtonItem偏移位置的问题

    iOS7 之后,我们直接在导航栏添加barbuttonItem时候,会发现有一定偏移量, 比如: self.navigationItem.leftBarButtonItem ＝ UIBarButton ...

  2. ES6新增值比较函数Object.is

    在这之前我们比较值使用两等号 “==” 或 三等号“===”, 三等号更加严格,只要比较两方类型不同立即返回false. 另外,有且只有一个值不和自己相等,它是NaN 现在ES6又加了一个Object ...

  3. mysql 错误 1221 Incorrect usage of union and order by

    今天有个项目出现了问题 问题原因是union和order by 的问题.关于这个问题的解决方案可以猛击下面的链接. http://blog.csdn.net/gtuu0123/article/deta ...

  4. Spring AOP 开发中遇到问题:Caused by: java.lang.IllegalArgumentException: warning no match for this type name: com.xxx.collector.service.impl.XxxServiceImpl [Xlint:invalidAbsoluteTypeName]

    在网上找了很多,都不是我想要的,后来发现是我在springaop注解的时候 写错了类名导致的这个问题 @Pointcut("execution(* com.xxx.collector.ser ...

  5. Java报表FineReport在医院院长查询分析系统中有什么用

    1.医院院长查询系统的价值 目前,大中型医院的信息处理正从传统手工方式飞速向电脑信息化建设方案转变,一个大中型医院担负着繁重的医疗和科研任务,以及繁杂的事务性工作,院长必须时刻与各科室保持密切的连续, ...

  6. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...

  7. [转]在NopCommerce中新增一个Domain Model的步骤

    本文转自:http://www.cnblogs.com/aneasystone/archive/2012/08/27/2659183.html 在NopCommerce中新增一个Domain Mode ...

  8. codeforces118D. Caesar's Legions

    地址:http://www.codeforces.com/problemset/problem/118/D 题目: Gaius Julius Caesar, a famous general, lov ...

  9. ComboBox的数据联动

    实现效果: 点击年级下拉框值时,获取科目下拉框值 一:加载年级下拉框值 GradeDAL层: //检索所有年级名称集合,返回的是泛型集合List<Grade> public List< ...

  10. FMS 客户端带宽计算、带宽限制

    FMS 客户端带宽计算.带宽限制 1. 带宽计算 FMS内置了带宽检测的特性(被称作"native bandwidth detection"),要进行带宽检测,客户端只要在成功连接 ...