css优先级详解

样式的优先级

多重样式(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.jpg

解释:

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 优先级法则:

  1. 选择器都有一个权值,权值越大越优先;

  2. 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

  3. 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

  4. 继承的CSS 样式不如后来指定的CSS 样式;

  5. 在同一组属性设置中标有“!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 的渲染。

Image placeholder
前端答疑
未设置
  11人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

配置 Horizon 的 queue, balance, processes 参数以及 Redis 中的优先级

我假设你正在使用redis和 LaravelHorizon,要开始配置horizon,仅需用我下面的命令清空所有进程队列任务中horizon的仪表盘。我也曾在本系列的a教程中描述过 链接:phpar

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

css中Position属性图文详解

1.介绍1.1说明Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。1.2主要的值①absolute:绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。

css属性兼容性详解

盒模型属性【宽高width/height】(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height【内边距padding】padd

css栅格布局图文详解

圣杯布局圣杯布局是一种三列布局,两边定宽,中间自适应:css:*{ box-sizing:border-box; } html,body{ width:100%; height:100%; margi

css清除浮动图文详解

什么是CSS清除浮动?在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

03.4. Go 的 http 包详解

前面小节介绍了Go怎么样实现了Web工作模式的一个流程,这一小节,我们将详细地解剖一下http包,看它到底是怎样实现整个过程的。 Go的http有两个核心功能:Conn、ServeMux Conn的g

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 反射的基本使用

PHP反射 今天我要给大家讲解的是PHP当中使用非常普遍的高级操作:反射。反射在当今几乎所有的PHP框架或者工具中都占用非常重要的角色,就比如Laravel的容器,容器对于Laravel架构来说极其重

Redis为什么是单线程、及高并发快的3大原因详解

Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快; 2.redis是单线程的,省去了很多上下文切换线程的时间; 3.redis使用多路复用技术,可以处理并发的连接。非阻塞

Swoft2 配置详解

Swoft2配置详解更多资料请关注swoft系列教程、小白系列教程定期连载基本功能介绍 配置项是只读的,不能动态修改.所以不要尝试着动态修改配置 Swoft2的配置分为两类,环境配置和应用配置。 en

详解 varint 编码原理

什么是Varint编码Varint是一种使用一个或多个字节序列化整数的方法,会把整数编码为变长字节。对于32位整型数据经过Varint编码后需要1~5个字节,小的数字使用1个byte,大的数字使用5个

万字详解Oracle架构、原理、进程,学会世间再无复杂架构

学习是一个循序渐进的过程,从面到点、从宏观到微观,逐步渗透,各个击破,对于Oracle, 怎么样从宏观上来理解呢?先来看一个图,这个图取自于教材,这个图对于从整体上理解ORACLE 的体系结构组件,非

详解 | 阿里怎么做双11全链路压测?

导读:全链路压测是阿里的首创,本文将从工作内容、操作过程、运行总结等多个方向来介绍下阿里内部典型电商活动(如双11准备),以给大家展示一个完整的压测流程,帮助更多的企业和用户更好的完成性能测试。前言关

详解数据服务共享发布

引言:随着云计算、大数据、物联网等技术兴起,数据朝着多样性、高体量、高速度方向发展,如何将海量数据安全、稳定、高效地数据共享出去成为各企业关注的重点。本次微课堂通过普元在数据服务共享平台研发过程中的实

数据库大牛李海翔详解全局读一致性技术

作者简介:李海翔,网名“那海蓝蓝”,腾讯金融云数据库技术专家。中国人民大学信息学院工程硕士企业导师。著有《数据库事务处理的艺术:事务管理和并发访问控制》、《数据库查询优化器的艺术:原理解析与SQL性能

共享内存在不同系统的应用与优劣详解

共享内存是一种使计算机程序能够同时共享内存资源以实现更高性能和更少冗余数据副本的技术。共享系统内存可以在单处理器系统、并行多处理器或集群微处理器上运行。对于分布式系统会有一些差异,但共享内存也可以其上

Oracle数据库不同损坏级别的恢复详解

墨墨导读:在DBA的日常工作中不可避免存在着数据库的损坏,本文将主要介绍Oracle数据库遇到不同损坏级别下的应该采用的恢复方法,供读者在遇到此类情景时,能的找到适合自己的恢复方法,提高工作效率。数据

千字访谈魏松斌 详解思科Wi-Fi 6

自1997年,IEEE提出第一代Wi-Fi协议,到现在已有20余年。期间经历不断完善,由最早的802.11、802.11b、802.11g/a、802.11n,到沿用至今的802.11ac和即将爆发的