关于css优先级
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优先级的更多相关文章
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- css优先级和层叠
css优先级和层叠 1.优先级 计算方法: a.行内样式 b.id选择器的数量 c.类,伪类和属性选择器的数量 d.标签选择器和伪元素选择 ...
- 使用background和background-image对CSS优先级造成影响
在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- CSS优先级算法是如何计算？
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...
- CSS优先级总结(转载)
样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...
- css优先级计算
主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...
- css 优先级
css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高.例子1:CODE:<style type="text/css"> &l ...
随机推荐
- 【SQL】183. Customers Who Never Order
Suppose that a website contains two tables, the Customers table and the Orders table. Write a SQL qu ...
- Sublime Text 下的Install Package安装方法
废话不多说.... 如果你是Sublime Text3用户,按下Ctrl+~呼出控制台,输入以下代码 import urllib.request,os,hashlib; h = '7183a2d3e9 ...
- 面向对象设计原则 依赖倒置原则（Dependency Inversion Principle）
依赖倒置原则(Dependence Inversion Principle)是程序要依赖于抽象接口,不要依赖于具体实现. 简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块 ...
- POI2018
[BZOJ5099][POI2018]Pionek(极角排序+two pointers) 几个不会严谨证明的结论: 1.将所有向量按极角排序,则答案集合一定是连续的一段. 当答案方向确定时,则一个向量 ...
- BZOJ 5059: 前鬼后鬼的守护 可并堆 左偏树 数学
https://www.lydsy.com/JudgeOnline/problem.php?id=5059 题意:将原序列{ai}改为一个递增序列{ai1}并且使得abs(ai-ai1)的和最小. 如 ...
- CF1027F Session in BSU
link 花絮: 这场看起来打得还不错的样子……(别问我是用哪个号打的). 然后听说这题的思想被出了好多次,女生赛也出过,quailty算法,然而当时没反应过来,而且时间不多啦. 题意: 有n个人,每 ...
- kali下利用weeman进行网页钓鱼
工具下载链接:https://files.cnblogs.com/files/wh4am1/weeman-master.zip 利用wget命令下载zip压缩包 利用unzip命令解压 接着直接cd进 ...
- bzoj 2244
没有正确分析路径可能的条数,它是指数增长的,会爆long long. 然后就是正反两次时间分治. 另一个就是max with count,即带计数的最值,即除了记录最值,还要记录最值取得的次数. /* ...
- hdoj 5182 PM2.5 排序
PM2.5 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem Descr ...
- C#高级编程9-第10章 集合
集合 1.集合接口和类型 接口 说明 IEnumerable<T> 如果foreach语句用于集合,就需要IEnumerable接口.这个借口定义了方法GetEnumerator(),他返 ...