css优先级汇总
原文:css优先级汇总
我所理解的css优先级：当两个或者多个样式作用于同一个元素时，就会出现css优先级的问题。
多重样式优先级：当内联样式、内部样式和外部样式作用于同一个元素时，属于多重样式的范畴。优先级的顺序为内联样式>内部样式>外部样式。
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
/*.color{color:red;}外部样式*/
<style>/*内部样式*/
.color{color:black;}
<style/>
</head>
<body>
<a href="" class="color" style="color:blue">我爱变色</a>
/*内联样式*/
</body>
/*不出意外的话，应该显示为蓝色，前提是内部样式要放在外部样式的后面*/
选择器的优先权：不同种类的选择器通过权值来计算其优先权的大小。
权值大小：
1.内联样式权值最高为[1000];
2.id选择器权值为[0100];
3.class、属性、伪类选择器权值为[0010];
4.元素标签、伪元素选择器权值为[0001];
5.通用选择器权值为[0000];
解释：权值是一个4位的数字串，从左到右，一级大于一级，每一级之间没有进制，不可跨越。在进行权值比较的时候，应该从左到由进行比较。
<style type="text/css">
.contain .box p{color:red}/*权值：0010+0010+0001=0021*/
.contain div p{color:black}/*权值：0010+0001+0001=0012*/
</style>
<div class="contain">
<div class="box">
<p>颜色</p>
</div>
</div>
/*p标签内容应该为红色*/
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大
<style type="text/css">
div{background: red !important; background: blue}
</style>
/*显示为红色，ie6显示为蓝色，在ie6下，!important跟没用是一样的效果*/
css优先级汇总的更多相关文章
- CSS 技巧汇总
CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)＝伪类选择符(:hover )＝属性选择符([attr] ) ...
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- CSS hack 汇总
1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- CSS 高级技巧汇总
在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- CSS基础汇总
1. css的出现是为了是内容和表现分离.分为三种: 内联:不推荐 嵌入:没有利用浏览器缓存机制. 外联: 2. css优先级:①id优先级高于class②后面的样式覆盖前面的③指定的高于继承④行内样 ...
随机推荐
- CentOS7 安装NFS SSH免密码登陆
配置5台虚拟机 ip为192.168.1.160 - 164,使用160作为共享服务器 使用yum安装nfs 以及rpcbind,有很多文章介绍,这里不再赘述 一.启动服务 1.启动rpcbind s ...
- 对java中classloader使用的一点理解（转）
先简单介绍下java的classloader,网上资料很多,就说点关键的. Java 中的类加载器大致可以分成两类,一类是系统提供的,另外一类则是由 Java 应用开发人员编写的.系统提供的类加载器主 ...
- How to install IIS 7.5 on Windows 7 using the Command Line
原文 How to install IIS 7.5 on Windows 7 using the Command Line On Windows Vista, to install IIS 7.0 f ...
- eclipse+Java2WSDL+WSDL2Java 2012-12-06 12:32:43| 分类： j2ee |报道|字体大小 认购 一、eclipse如何使用低axis生成wsdl 可以使用
eclipse+Java2WSDL+WSDL2Java 一.eclipse下怎样用axis生成wsdl 能够使用axis提供的Java2WSDL功能生成所要公布类的 WSDL,过程例如以下: 1.在 ...
- libmsgque官方主页
libmsgque 消息队列(MESSAGE QUEUE)库项目简析 注: 本文如果你已经有linux开发环境 请确保你使用本库时是tag版本号. target=libmsgque-1.0 本项目採用 ...
- URAL 1727. Znaika's Magic Numbers（数学 vector）
主题链接:http://acm.timus.ru/problem.aspx?space=1&num=1727 1727. Znaika's Magic Numbers Time limit: ...
- MVC基本概念和流程
MVC基本概念和流程 MVC的概念 Model(模型):包含数据和行为.不过现在一般都分离开来:Value Object(数据) 和 服务层(行为). View(视图):负责进行模型的展示,一般就是展 ...
- R语言数据分析系列六
R语言数据分析系列六 -- by comaple.zhang 上一节讲了R语言作图,本节来讲讲当你拿到一个数据集的时候怎样下手分析,数据分析的第一步.探索性数据分析. 统计量,即统计学里面关注的数据集 ...
- 【网络流量-二部图最大匹配】poj3041Asteroids
/* 这个问题将是每行一个x作为节点x,没有列y作为节点y,障碍物的坐标xy来自x至y的 边缘.图建的问题后,变成,拿得最少的点,因此,所有这些点与相邻边缘,即最小 点覆盖,与匈牙利算法来解决. -- ...
- springmvc4
web项目(使用html视图解析器) 完整配置springmvc4,最终视图选择的是html,非静态文件. 最近自己配置spring的时候,遇到很多问题,由于开发环境和版本的变化导致网友们给出的建 ...