专栏首页王金龙的专栏CSS:CSS样式表及选择器优先级总结

CSS:CSS样式表及选择器优先级总结

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

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

  1、样式表的优先级

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

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

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

 1 <head>
 2     <style type="text/css">
 3       /* 内部样式 */
 4       h1{color:green;}
 5     </style>
 6  
 7     <!-- 外部样式 style.css -->
 8     <link rel="stylesheet" type="text/css" href="style.css"/>
 9     <!-- 设置:h1{color:blue;} -->
10 </head>
11 <body>
12     <h1>Test</p>
13 </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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ext4.0中window窗体使用详解(常用属性)

    <link rel="stylesheet" type="text/css" href="<%= path %>/extJs/resources/css/ext...

    业余草
  • CSS盒模型及边距问题

    盒模型是CSS的基石之一,页面的每一个元素都被看作一个矩形框,分别由外边距,边框,内边距,内容组成,

    菜的黑人牙膏
  • 使用Maven构建JavaFX程序(HelloWorld示例)

    本工程包含一个main入口函数类,一个controller类,资源文件包括一个fxml文件,一个css样式文件。 工程目录如下:

    TheOneGIS
  • 2.3.1 基于easyUI框架写加法器

    easyUI是一个第三方控件库,内容很全面。比如我们做一个加法计算程序,打开其官网,找到示例修改到自己想要的结果。先找到其相关内容:

    周星星9527
  • 总有一款适合你的协同设计工具

    协同设计是当下技术行业技术更新的一个重要方向,也是设计类工具软件发展的必然趋势。它,不单是一个设计类的专业术语,更是一种商业化的服务模式。

    奔跑的小鹿
  • 2018年最值得关注的11个网页开发博客

    网络开源和技术创新使得Web开发领域正在迅速变化,网络开发技术迭代更新也非常快速。网络时代,所谓的“专家”通常都是善于学习的那一批人。因此,随时关注和跟进行业最...

    奔跑的小鹿
  • Sketch 和 PS中的设计图如何实现“自动切图”?

    切图是很多UI设计师的一项日常工作。平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利...

    奔跑的小鹿
  • JavaFX入门(五):使用CSS样式美化你的UI控件

    CSS(层叠样式表,Cascading Style Sheets)原来是被用来在网页开发中表现HTML元素样式的一种文本标记语言。HTML用来展现内容,CSS被...

    TheOneGIS
  • 另外的视角来看 antd 这件事儿

    今天圣诞节,所以在 type 是 primary 的 Button 上都加上了雪花。

    桃翁
  • CSS定位概述

    如果对一个元素进行相对定位,它将出现在它所在的位置上,然后可以通过设置垂直或者水平位置,让这个元素“相对于”它原来的位置进行移动,这时元素依然占据原来的位置,但...

    菜的黑人牙膏

扫码关注云+社区

领取腾讯云代金券