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②后面的样式覆盖前面的③指定的高于继承④行内样 ...
随机推荐
- 位运算总结&拾遗
JavaScript 位运算总结&拾遗 最近补充了一些位运算的知识,深感位运算的博大精深,此文作为这个系列的总结篇,在此回顾下所学的位运算知识和应用,同时也补充下前文中没有提到的一些位运算知识 ...
- 在 Windows 7 Professional、Enterprise 或 Ultimate 上安装 IIS 7.5
原文 在 Windows 7 Professional.Enterprise 或 Ultimate 上安装 IIS 7.5 应用到: Windows Server 2008 R2 默认情况下,Wind ...
- printf交替使用
今天附带printf一些替代实现. 转载请注明出处:http://blog.csdn.net/u010484477谢谢^_^ 我们总是用printf做各种输出语句: printf("%d&q ...
- open-flash-chart2各种效果
<pre class="html" name="code"><pre class="html" name="co ...
- sql多表查询之一:Where 和 On的秘密
原文 sql多表查询之一:Where 和 On的秘密 对于还在SQL初级阶段的朋友来说,sql多表查询问题是一个比较有趣也容易出错的技术.什么时候会用到sql多表查询呢?是在两张或两张以上表单中通过某 ...
- RQNOJ PID4 / 数列(位运算)
题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...
- django csrf_token生成
django模板中生成csrf_token的不同方式 系统环境 CENTOS 6.4 python 2.7.6 django 1.7.1 当post提交表单的的时候,是需要 csrf_token的, ...
- crawler_微信采集方案
仅供参考
- java_Timer_schedule jdk自带定时器
定时器经常在项目中用到,定制执行某些操作,比如爬虫就需要定时加载种子等操作,之前一直用spring的定制器近期做项目发现,jdk有很简单的提供 代码如下 1 /* * Copyright (c) 20 ...
- 为WebBrowser的WEB页的Document注册事件的问题
原文:为WebBrowser的WEB页的Document注册事件的问题 当使用WebBrowser,并对其装载的Web页建立Document的事件后,WebBrowser里的页面元素都变得难于操作了, ...