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. OpenGL 笔记<3> 数据传递 一

    Sending data to a shader using vertex attributes and vertex buffer object 上次我们说到着色器的编译和连接,后面的事情没有做过多 ...

  2. Leaving Auction CF 749D

    题目:http://codeforces.com/problemset/problem/749/D 题目大意: 有n个人竞拍,也有n个叫牌,一个人可以有多个叫价牌,但也可能有一些人根本不叫价 每个叫牌 ...

  3. 制作Linux内核

    <linux内核简介> <linux系统架构> 系统架构 用户部分: 应用程序:GNU C 库内核部分:系统调用接口.内核.体系结构相关代码(与硬件相关的代码) 划分原因:不同 ...

  4. windows下thrift的使用(C++)

    thrift cpp环境搭建: 1.  安装boost_1_53_0,注意,使用vs2010版本时,使用二进制的boost安装版本,生成的lib有可能是,在后续操作会出问题.在源码目录中,运行boot ...

  5. django组件之contenttype(一)

    方式1:适用于1张表和另一张表要关联的时候. 1.路飞学成表设计: 2.将2个价格策略表合并1张表. 3.如果再加一张表,那价格策略表的表结构会发生改变.  这样不合理的,我们的表结构一般设计完就不会 ...

  6. ?P<username>\w+

  7. Qt Quick快速入门之信号、槽

    信号和槽主要用于组件之间的通信,类似于.net和java中的委托. 使用QObject::connect方法将信号与槽关联起来,然后信号的发起者发出信号,接受者中的槽函数就会执行. 比如connect ...

  8. [CF1086E]Beautiful Matrix(容斥+DP+树状数组)

    给一个n*n的矩阵,保证:(1)每行都是一个排列 (2)每行每个位置和上一行对应位置不同.求这个矩阵在所有合法矩阵中字典序排第几.考虑类似数位DP的做法,枚举第几行开始不卡限制,那么显然之前的行都和题 ...

  9. spring---aop(1)---AOP概念

    写在前面 由于spring的事务系列,可以带出spring的aop.spring的事务只是spring的一个具体实现 名词解释 通知.增强处理(Advice) 就是你想要的功能,也就是上说的安全.事物 ...

  10. 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...