我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式、内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢?

  也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了class,又用到了id,还有继承自父元素的样式,那么如果发生冲突时浏览器又怎么表现呢?

  1、样式表的优先级

  所谓多重样式,指的是对于相同的HTML元素在三种样式表中都存在样式效果的时候的样式覆盖问题。对于多重样式,也就是三种样式表都存在的情况下,一般来说它们的优先级是:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

  但是会有一种情况是,如果外部样式表的引入位置在内部样式的后面,也即外部样式表更接近HTML元素,那么外部样式表中的样式会覆盖内部样式表中相同元素的样式。也就是说,如果是对相同的的HTML元素进行样式编辑,在HTML文档流中距离HTML元素近的会覆盖距离HTML元素远的。

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

  上面代码中,Test会显示为蓝色。若将外部样式和内部样式交换位置,则Test将显示为绿色。

  确定了样式表的优先级之后,也就是确定了使用那个样式表中的样式之后,还有一个问题,就是,如果在同一个样式表中,对同一个HTML元素,分别用其id、class、tagName定义了样式,且样式还不相同,那么浏览器会怎么选择呢?这就是接下来要说的选择器的优先级。

  2、选择器的优先级

  Css选择器优先级计算规则

  根据Css选择器的类型,可以计算出这个样式有多大的优先级:

选择器类型

计算规则

元素标签中定义的样式(Style属性)

加1,0,0,0

每个ID选择符(如 #id)

加0,1,0,0

每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)

加0,0,1,0

每个元素选择符(如p)或伪元素选择符(如 :firstchild)等

加0,0,0,1

其它选择符包括全局选择符*,不过这也是一种specificity。

加0,0,0,0,相当于没加

  然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,从左到右逐位比较大小,数字大的CSS样式的优先级就高。

  有些人直接就说,内联的加1000,id的加100,class的加10, tag的加1,虽然在结果上是一致的,但是这种说法还是不够有说服力的。

  这里需要注意几点:

  1. !important声明的样式优先级最高,如果冲突再进行计算。
  2. 如果优先级相同,则选择最后出现的样式。
  3. 继承得到的样式的优先级最低。

  为了更好的理解这些计算规则,举些例子如下:

选择器

计算结果

* { }

0

li { }

1  (one element)

li:first-line { }

2  (one element, one pseudo-element)

ul li { }

2  (two elements)

ul ol+li { }

3  (three elements)

div + *[rel=up] { }

1,1  (one attribute, one element)

ul ol li.red { }

1,3  (one class, three elements)

li.red.level { }

2,1  (two classes, one element)

style=””

1,0,0,0  (one inline styling)

h1 { }

1  (one HTML selector)

div p { }

2  (two HTML selectors)

.hi

1,0  (one class selector)

div p.hi { }

1,2  (two HTML selectors and a class selector)

#hi

1,0,0  (one id selector)

body #darkside .sith p { }

1,1,2  (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

  祝愿大家可以在Css的路上一路披荆斩棘。生活,就当如Css一样,绚丽绽放、五彩缤纷。

 

  参考资料:http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html

       http://blog.sina.com.cn/s/blog_87728451010181pm.html

CSS:CSS样式表及选择器优先级总结的更多相关文章

  1. css 03-CSS样式表和选择器

    03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...

  2. CSS篇-样式表、选择器、权重、伪类

    CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...

  3. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  4. Day5 CSS基本样式和C3选择器

    Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色            background-color:transparent(默认值,透明); 颜色的取值:            ...

  5. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  6. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  7. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

  8. CSS样式----css样式表和选择器(图文详解)

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  9. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

随机推荐

  1. java.lang.NoSuchFieldError: org.apache.http.message.BasicLineFormatter.INSTANCE

    Android发出HTTP请求时出现了这个错误: java.lang.NoSuchFieldError: org.apache.http.message.BasicLineFormatter.INST ...

  2. Mac上搭建直播服务器Nginx+rtmp

    简介 nginx是非常优秀的开源服务器,用它来做hls或者rtmp流媒体服务器是非常不错的选择,本人在网上整理了安装流程,分享给大家并且作备忘. 步骤安装 1.安装Homebrow Homebrew简 ...

  3. leetcode 题解 || Swap Nodes in Pairs 问题

    problem: Given a linked list, swap every two adjacent nodes and return its head. For example, Given ...

  4. Java设计模式--------建造者模式(Builder模式)

    Builder模式定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. Builder模式是一步一步创建一个复杂的对象,它允许用户可以只通过指定复杂对象的类型和内容就可以构 ...

  5. Linux 软连接与硬连接

    Linux 软连接与硬连接 对于一个文件来说,有唯一的索引接点与之相应,而对于一个索引接点号,却能够有多个文件名称与之相应.因此,在磁盘上的同一个文件能够通过不同的路径去訪问该文件.注意在Linux下 ...

  6. 算法提高 9-3摩尔斯电码 map

    算法提高 9-3摩尔斯电码 时间限制:1.0s   内存限制:256.0MB     问题描述 摩尔斯电码破译.类似于乔林教材第213页的例6.5,要求输入摩尔斯码,返回英文.请不要使用"z ...

  7. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  8. mysql时间相加函数DATE_ADD()

    mysql中的DATE_ADD()函数 1.定义:函数向日期添加指定的时间间隔. 2.语法:DATE_ADD(date,INTERVAL expr type) date 参数是合法的日期表达式.exp ...

  9. beta冲刺————第四天(4/5)

    完善的具体内容: 前端:以下的功能还未完全实现 (1)点击收藏可以收藏入收藏夹 (2)分享操作,意见反馈 后端: 寻找文章来源,像数据库中增添了150篇的新文章.(我们的文章都要求自己内部人员看过,所 ...

  10. HTML5是什么?如何鉴定HTML5产品?[转]

    转自:http://www.jscode.cn/web/v62484 Html 5开始大热标志性的事件是Apple 前CEO Steve Jobs 公开炮轰Flash,并指出Flash在移动终端的不利 ...