样式的优先级

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

示例如下：

<head>
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
 
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
</head>
<body>
    <h3>测试！</h3>
</body>

选择器的优先权

解释：

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

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

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

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

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

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

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

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

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

●   Firefox 处理下载和渲染的顺序大体相同，只是在细微之处有些差别，例如：iframe 的渲染。

作者： XuGang   网名：钢钢
出处： http://xugang.cnblogs.com
声明： 本文版权归作者和博客园共有。转载时必须保留此段声明，且在文章页面明显位置给出原文连接地址！

CSS的优先级理解的更多相关文章

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

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

  2. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  3. 关于Css选择器优先级

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

  4. CSS的优先级和继承问题

    CSS的优先级和继承问题 ★CSS的冲突,即优先级 CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果. ★解决CSS冲突的优先级规则: ● CSS层叠 ...

  5. css的优先级 和 权重

    之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是  按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > cla ...

  6. 关于CSS的个人理解

    CSS的个人理解 一.概念 层叠样式表,主要由属性和属性值(value)组成.(虽然HTML.CSS对代码大小写不敏感,但是属性和属性值对代码大小写是敏感的) 二.工作方式 1.工作原理 由浏览器将C ...

  7. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  8. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  9. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

随机推荐

  1. [CSP-S模拟测试]:异或（数学）

    题目描述 给定$L,R$,我们希望你求出:$$\sum\limits_{i=L}^R\sum\limits_{j=L}^R(i\oplus j)$$其中这里的$\oplus$表示异或运算.答案对$10 ...

  2. 高级软件测试技术-任务进度-Day02

    任务进度11-14 使用工具 Jira 小组成员 华同学.郭同学.穆同学.沈同学.覃同学.刘同学 任务进度 在经过了昨天的基本任务分配之后,今天大家就开始了各自的内容,以下是大家任务的进度情况汇总. ...

  3. code first System.Data.Entity.Infrastructure.CommitFailedException: An error was reported while committing a database transaction but it could not be determined whether the transaction succeeded

    System.Data.Entity.Infrastructure.CommitFailedException: An error was reported while committing a da ...

  4. 使用pycharm编写python乱码

    开始总是乱码,该设置的都设置了,后来用charde检测编码也一直报错,之后重启了pycharm就好了,乱码问题也没了

  5. 利用Git版本控制管理你的项目

    准备工作 项目创建完成后,将项目版本控制起来,今后每个版本的迭代会非常清楚,同时也有助于项目进行协同开发. 还有一个十分重要的问题是:项目上线后,线上的运行的程序的配置与线下进行测试的配置文件是不一样 ...

  6. 设计模式(2): 响应store中数据的变化

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. store里面响应数据变化 通常情况下,我们会把数据存在store里面 ...

  7. 安装ssh

    1.win10 安装ssh sudo apt-get remove --purge openssh-server ## 先删ssh sudo apt-get install openssh-serve ...

  8. 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第2节 maven的安装和仓库种类_05仓库的种类和彼此关系

    maven工程里面放的是jar包的坐标. 启动项目的时候会根据jar包的坐标到仓库中找对应的坐标 maven的安装目录.conf/settings.xml文件 ${user.home}表示系统盘,用户 ...

  9. Matlab——图形绘制——二维平面图形

    二维平面图形 hold on ————在已画好的图形上添加新的图形 plot 是绘制一维曲线的基本函数,但在使用此函数之前,我们需先定义曲线上每一点的x 及y 座标.下例可画出一条正弦曲线: > ...

  10. 【HANA系列】SAP HANA ODBC error due to mismatch of version

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA ODBC er ...