关于css优先级
来源:互联网 发布:淘宝qs工业生产许可证 编辑:程序博客网 时间:2024/06/06 05:18
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了。
0 0
- 关于CSS的优先级,CSS优先级计算
- 关于CSS的优先级,CSS优先级计算
- 关于CSS样式优先级
- 关于CSS样式优先级
- 关于CSS的优先级
- 关于css优先级
- 关于CSS样式优先级
- 关于css的优先级
- 关于CSS优先级
- 关于CSS优先级的问题
- 关于css优先级的问题
- 关于css的优先级问题
- 一道关于CSS选择器优先级的题
- 一个关于CSS选择器“优先级”的新问题
- 关于css属性的优先级详细探索
- 关于css中选择器优先级的总结
- 关于css优先级及怎样设计css书写
- CSS优先级,优先级计算
- 理解hibernate的session缓存机制(一级缓存和二级缓存)
- 玩转extjs5之extjs初识(一)
- 一个无限批量下载百度美女图片的demo
- SQL:列的拆分
- UVA11019 Matrix Matcher(一种计算子矩阵在母矩阵中出现次数的办法,AC自动机+kmp)
- 关于css优先级
- hibernate列名无效
- sql server linkserve连接到oracle
- JavaScript学习笔记:alert消息对话框
- 阿里云 CenterOS 安装mysql java tomcat gcc nginx步骤
- windows编译/调试ffmpeg vs2013编译/调试ffmpeg win7 64位
- 打开eclipse时出现Error:could not open D:\java\lib\i386\jvm.cfg
- 【重读设计模式】组合模式
- 单片机小白学步系列(十) 单片机程序下载相关知识