前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS:CSS样式表及选择器优先级总结

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

作者头像
王金龙
发布2019-02-25 14:56:56
1.1K0
发布2019-02-25 14:56:56
举报
文章被收录于专栏:王金龙的专栏

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

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

  1、样式表的优先级

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

代码语言:javascript
复制
(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

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

代码语言:javascript
复制
 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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-03-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  •   1、样式表的优先级
  •   2、选择器的优先级
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档