说到到css的样式优先级，今天偶再来回顾下，从css的样式优先级可分为两个部分：

　　1、从CSS代码放置的位置看权重优先级：

　　     内联样式 > 内部嵌入样式 >外联样式

　　2、从样式选择器的权重优先级：

　　     Important > 内联样式 > ID > 类、伪类、属性选择器 > 标签、伪元素 > 通配符

今儿，我们重点来看看第2点—样式选择器。

请看以下代码：

<!DOCTYPE html>

    <head>

        <title>css</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

           div.class1 {

               background:pink;

           }

           .class2 {

               background:green;

           }

        </style>

    </head>

    <body>

        <div class="class1 class2" style="width:100px;height:100px;"></div>

    </body>

</html>

运行代码，效果图如下：

是粉红色。按照上面的说法class1、class2不都属于类嘛。既然优先级一样，那不就应该是后面的class2（绿色）覆盖住class1（粉红色）吗？

是的。类是属于同一级，但是div.class1和.class2的优先权重是不一样的。

请看下表：

选择器

权重

!important

1,0,0,0

ID

0,1,0,0

类、伪类、属性选择器

0,0,1,0

标签、伪元素

0,0,0,1

通配符

0,0,0,0

当我们看到html代码时，不要单一看它调用的是什么样式，比如上面的class1、class2在放在div标签上时，都一样，类嘛

但是，其实它们的权重是不一样的。所以要追踪到css样式中，查看它们的权重。

这个权重的计算方法就是利用上面表中对应的权重值，叠加，得到最终值。值越大，权重就越大，从而优先级也就越高咯。

如上面代码中的class1、class2：

结合上面中列出的权重，从而可得class1和class2的权重

　　class1 = div(0001)+.class1(0010) = 0011

　　class2 = .class2(0010) = 0010

class1的权重大于class2的权重，从而class1的优先级就高于class2咯。

所以，<div class=”class1 class2”>显示class1的粉红色咯 。

下面列举了几个css表达式的权重值，自我测试下：

css选择器表达式

权重值

h1 + *[rel = up ]

0011

li.red.level

0021

#test:not(ii)

0110

#test:before

0101

好了，那当样式的优先级一样呢？那就得看它们出现的顺序了。后出现的覆盖前面的。

注意：是样式表中的顺序，而不是html标签中class出现的顺序。

如下：

<!DOCTYPE html>

    <head>

        <title>css</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

            .class2 {

               background:green;

           }

           .class1 {

               background:pink;

           }

        </style>

    </head>

    <body>

        <div class="class1 class2" style="width:100px;height:100px;"></div>

    </body>

</html>

运行上述代码，页面显示结果为粉色，而不是绿色！！

CSS样式之优先级的更多相关文章

  1. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  2. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  3. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  4. Web前端面试指导(十三)：css样式的优先级是怎么样的？

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  5. 学习了解CSS3发展方向和CSS样式与优先级

    通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...

  6. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  7. CSS 样式的优先级

    1. 同一元素引用了多个样式时,排在后面的样式属性的优先级高 例如,下面的 div,同时引用了 [.default] 和 [.user] 中的样式,其中 [.user] 样式中的 width 属性会替 ...

  8. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

  9. css样式引入优先级？

    css中的优先级讲的有 1.选择器的优先级. 2.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...

随机推荐

  1. java基础学习总结-接口

    原文链接:http://www.cnblogs.com/xdp-gacl/p/3651121.html 一.接口的概念 JAVA是只支持单继承的,但现实之中存在多重继承这种现象,如"金丝猴是 ...

  2. web常见错误提示总结

    在写web程序的时候,经常会出现一些网页错误的数字提示,如果能够明白这些提示的含义,那对于调试程序是有极大帮助的.网上有很多这方面的总结,但为了适应自己的阅读习惯,以及日后的查找方便,就做了一些修改并 ...

  3. storm 入门原理介绍

    1.hadoop有master与slave,Storm与之对应的节点是什么? 2.Storm控制节点上面运行一个后台程序被称之为什么? 3.Supervisor的作用是什么? 4.Topology与W ...

  4. xampp常见安装失败问题

    遇到这两个错误后不管它,继续安装.完成后下载Microsoft Visual C++ 2008 Redistributable Package (x86),可以到这里下载:Microsoft Visu ...

  5. RunLoop（基本操作）

    基本概念 -(void)runTimerInThread { //NSAutoreleasePool,没的用 [NSTimer scheduledTimerWithTimeInterval:1.0 t ...

  6. Smart3D系列教程4之 《案例实战演练1——小物件的照片三维重建》

    一.前言 Wish3D出品的Smart3D系列教程已经推出3讲了,分别是关于倾斜摄影三维建模原理应用.照片采集技巧.Smart3D各个功能模块的作用,它们都是围绕Smart3D建模软件进行的讲解.那么 ...

  7. ratina 视网膜屏幕解决方案大全

    第三方教程 http://www.tuicool.com/articles/JBreIn 知乎 https://www.zhihu.com/question/21653056 强烈推荐!!!最牛逼最专 ...

  8. 初学java之12 泛型编程的个人理解总结

    首先,强调一个观点: 对于我这样的初学者,一定要站在虚拟机和编译器的角度来分析java 语言的种种特性,泛型也不例外.(我认为这个一条正确的学习经验) 写这篇文章起源于最近在学java,有一天在路上和 ...

  9. 《寒江独钓_Windows内核安全编程》中修改类驱动分发函数

    最近在阅读<寒江独钓_Windows内核安全编程>一书的过程中,发现修改类驱动分发函数这一技术点,书中只给出了具体思路和部分代码,没有完整的例子. 按照作者的思路和代码,将例子补充完整,发 ...

  10. Call for Papers IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM)

    IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 In ...