css的优先级从低到高依次是：内部样式表的优先级为（1，0，0，0），id选择器优先级为（0，1，0，0），class选择器为（0。0，1，0），tag标签为（0。0，0，1）。除此之外，!important权重最高，比inline style还要高。

从字面意思就知道它最重要。

在这里插个题外话。

我之前一直错误的以为!important仅仅是css hack的一个写法。

我印象中!important是号称支持到ie7及以上的，不支持ie6的。不知道人没有也这么觉得。。。直到今天我才意识到我的错误。事实上在我知道了!important能够改变css优先级的的时候还知道了ie6也是认识!important的。仅仅只是IE6读取含有!important'的css属性是顺序读取的。这是IE6的一个非常典型的bug。比方：

<style type="text/css">

      div{

            background: red !important;

            background: blue;

      }

</style> ­

这个结果是div的背景为blue；假设这样：

<style type="text/css">

        div{

             background: blue;

             background: red !important;

        }

</style> ­

把两个属性倒换位置。结果背景为red。这说明IE6并不会对!important开放特权。

而是一视同仁。

比如：

情形一：div.test1 .span a 优先级 （0，0，2，2）。
情形二：span#xxx .songs li 优先级（0，1，1，2）；

情形三：#xxx li 优先级 100 +1 （0，1，0。1）；

直接上代码：

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		div .aa{color:orange;}/*（0，0，1。1）*/

		.bn .aa{color:red;}/*（0。0。2，0）*/

		#bb .aa{color:yellow;}/*（0。1，1，0）*/

		#bb a{color:blue;}/*（0，1，0，1）*/

	</style>

</head>

<body>

	<div id="bb" class="bn">

		<a style="color:gray;" href="#" class="aa">link</a>

	<div>

</body>

</html>

代码运行后，link字体的颜色为gray，由于内部样式表的优先级最高。为（1，0，0。0）。

可是假设。给div .aa{color:orange!important;}这样一个属性，那么link字体的颜色就是orange了。

关于css优先级的更多相关文章

  1. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  2. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  3. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  4. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

  5. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  6. 使用background和background-image对CSS优先级造成影响

    在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  7. CSS优先级算法是如何计算？

    CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...

  8. CSS优先级总结(转载)

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  9. css优先级计算

    主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...

  10. css 优先级

    css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高.例子1:CODE:<style type="text/css"> &l ...

随机推荐

  1. ROT13 加密与解密

    ROT13简介: ROT13(回转13位)是一种简易的替换式密码算法.它是一种在英文网络论坛用作隐藏八卦.妙句.谜题解答以及某些脏话的工具,目的是逃过版主或管理员的匆匆一瞥.ROT13 也是过去在古罗 ...

  2. POJ 2117 Electricity 双联通分量 割点

    http://poj.org/problem?id=2117 这个妹妹我竟然到现在才见过,我真是太菜了~~~ 求去掉一个点后图中最多有多少个连通块.(原图可以本身就有多个连通块) 首先设点i去掉后它的 ...

  3. ST-PUZZLE-2.0（一个益智游戏）

    注:未经博主允许不得转载. 原文链接:http://www.cnblogs.com/Blog-of-Eden/p/9060300.html 和 https://i-m-eden.github.io/2 ...

  4. 【堆优化Dijkstra+字典序最短路方案】HDU1385-Minimum Transport Cost

    [题目大意] 给出邻接矩阵以及到达各个点需要付出的代价(起点和终点没有代价),求出从给定起点到终点的最短路,并输出字典序最小的方案. [思路] 在堆优化Dijkstra中,用pre记录前驱.如果新方案 ...

  5. kali下利用weeman进行网页钓鱼

    工具下载链接:https://files.cnblogs.com/files/wh4am1/weeman-master.zip 利用wget命令下载zip压缩包 利用unzip命令解压 接着直接cd进 ...

  6. Siege（开源Web压力测试工具）——多线程编程最佳实例

    在英语中,"Siege"意为围攻.包围.同时Siege也是一款使用纯C语言编写的开源WEB压测工具,适合在GNU/Linux上运行,并且具有较强的可移植性.之所以说它是多线程编程的 ...

  7. 2018-2019-20172329 《Java软件结构与数据结构》第二周学习总结

    2018-2019-20172329 <Java软件结构与数据结构>第二周学习总结 教材学习内容总结 <Java软件结构与数据结构>第三章 集合概述--栈 一.集合 1.我们印 ...

  8. Codeforces Round #361 (Div. 2) B. Mike and Shortcuts bfs

    B. Mike and Shortcuts 题目连接: http://www.codeforces.com/contest/689/problem/B Description Recently, Mi ...

  9. Codeforces Round #254 (Div. 1) A. DZY Loves Physics 智力题

    A. DZY Loves Physics 题目连接: http://codeforces.com/contest/444/problem/A Description DZY loves Physics ...

  10. centos7下redis-2.8.13安装笔记

    安装gcc 执行命令:yum install gcc 中间有两次提示,要求输入:yes 或 y,我们按照提示来就可以 至此安装成功 注意:如果不装gcc,解压redis后执行make命令会报错,如下图 ...