我们在写网页的时候经常会遇到同一个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样式表和选择器的优先级以及position元素属性值的区别

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

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

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

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

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

  4. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  5. CSS的样式表基本概念

    一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <h ...

  6. 图解 CSS: 理解样式表的逻辑(转载)

    原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html 样式表可以是外部的.内联的或嵌入的; 链接外部样式文件一般是:<lin ...

  7. CSS重置样式表

    网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...

  8. html部分---样式表,选择器;

    <1.内联样式,优点:控制精确,缺点:代码重用性差,页面代码乱.> <div style="background-color:#0F0"></div& ...

  9. css 层叠式样式表

    内联样式:样式优先级最高的 <div style="width:100px;height:100px;"></div> style=“” 用冒号和分号 wi ...

随机推荐

  1. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  2. iOS 让按钮上的标题换行显示

    项目中遇到了要让按钮上的文字换行显示的需求,就写了这个博客. 1.如果按钮上的文字固定,形式是写死的,可以考虑给标题文字加\n换行符来达到效果,但是,记得一定要设置这个属性,不然是不会换行的, but ...

  3. queen8

    八皇后问题 八皇后问题的数学模型:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上.八皇后问题可 ...

  4. 前端面试题2016--HTML

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...

  5. ASP.NET POST XML JSON数据,发送与接收

    接收端通过Request.InputStream读取:byte[] byts = new byte[Request.InputStream.Length];Request.InputStream.Re ...

  6. 用nstimer实现倒计时

    用nstimer实现倒计时 // [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFir ...

  7. [Java Web整合开发王者归来&#183;刘京华] 1、 Java Web开发

      目录: 1.Web技术简介 2.动态网站与静态网站 3.Java Web开发模式 4.JavaScript简介 1.Web技术简介 PS: 最近还有更凶残的技术,即整个操作系统都是基于Web的,如 ...

  8. MongoDB小型文档型数据库使用

    MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中 ...

  9. BZOJ 1787 紧急集合

    LCA.注意细节. #include<iostream> #include<cstdio> #include<cstring> #include<algori ...

  10. mysql添加用户和用户权限

    Mysql添加用户使用可以对mysql数据库用户表有操作权限的用户名登陆mysqlinsert into user(Host,User,Password) values('%','name','pas ...