CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式;ID>class>元素。
一、样式类型
1、行间
<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>
2、内联
<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>
3、外部
<link rel="stylesheet" href="css/style.css">
二、选择器类型
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type="text"]
6、伪类 :hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
三、权重计算规则
- 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为0100。
- 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值。
四、比较规则
- 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较,前一等级相等才往后比。
- 无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式;ID>class>元素。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后,所以覆盖掉了之前的。
- 在权重相同的情况下,后面的样式会覆盖掉前面的样式。
- 通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先。
五、!important
- !important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。
<style>
p{
color:red !important;
}
</style>
<p style="color:blue;">我显示红色</p> - ie7+和别的浏览器对important的这种作用的支持度都很好。只有ie6有些bug
p{
color:red !important;
color:blue;
}//会显示blue但是这并不说明ie6不支持important,只是支持上有些bug。看下面
p{
color:red !important;
}
p{
color:blue;
}
//这样就会显示的是red。说明ie6还是支持important的。
六、实例
a{color: yellow;} /*特殊性值:0,0,0,1*/
div a{color: green;} /*特殊性值:0,0,0,2*/
.demo a{color: black;} /*特殊性值:0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
#demo a{color: orange;} /*特殊性值:0,1,0,1*/
div#demo a{color: red;} /*特殊性值:0,1,0,2*/ <a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
<input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则,第4行优先级高-->
<a href="">第三条应该是黑色</a><!--适用第2、3行规则,第3行优先级高-->
</div>
<div id="demo">
<a href="">第四条应该是红色</a><!--适用第5、6行规则,第6行优先级高-->
</div>
本文是一个学习笔记。有什么不对的地方,希望大家指出。
参考
http://www.cnblogs.com/wangmeijian/p/4207433.html By 王美建 from 博客园 原创文章
http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php 简明现代魔法
CSS 选择器权重计算规则的更多相关文章
- CSS 选择器权重计算规则(转)
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS选择器权重计算规则
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- CSS选择器权重计算
CSS各种选择器的权重: 1.ID选择器 +100 2.类.属性.伪类选择器 +10 3.元素.伪元素选择器 +1 4.其他选择器 +0 如果有两个CSS样式都作用于某元素,如: #id ...
- HTML+CSS基础 权重的计算 权重计算规则
权重的计算 将选择器上面的选择器进行叠加,叠加后的总和就是该选择器的权重. 权重计算规则
- css系列,选择器权重计算方式
CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...
- 浏览器+css基础+选择器+权重+匹配规则
浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...
- css选择器权重、样式继承、默认样式
学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...
- CSS选择器的匹配规则
css选择器是从右向左匹配的, 比如:.list a {color:blue;} 先解析到 a 标签,并将页面上所有 a 标签的字体颜色都按照 color:blue 进行渲染(蓝色),再解析到 .li ...
随机推荐
- synchronized同一把锁锁不同代码
对于多线程,如果是计算密集型,多线程不一定优势:但如果是io密集型(因为速度慢),多线程多数情况下就有很大的优势了(但也不全是,因为当io已经满负荷运转下,即100%了,再增加线程,未必就会增加效率) ...
- (4.4)mysql备份还原——备份存储容灾基础知识
存储知识 1.为什么需要存储,存储一般解决哪些问题? 容量.速度.易于管理.安全(容灾与备份).可扩展性 2.存储发展历史 [2.1]大型机 [2.2]c/s结构(客户端->服务器) [2.3] ...
- linux 查看系统资源使用情况:vmstat
vmstat命令可以动态地查看系统资源的使用情况,如内存/交换分区/CPU的使用情况,通过使用该命令可以判断系统的瓶颈在哪里: [root@mysql ~]# vmstat procs ------- ...
- 林兴爆料小程序很快可以支持各个 App 直接打开小程序
在微信开放平台基础高级产品经理林兴演讲的当场,他爆料了微信小程序一个轰动性新能力:小程序很快可以支持各个 App 直接打开小程序!没错,你没有听错,简单来说,在不久以后,所有的 App 里面都可以看到 ...
- css继承样式怎么控制?用选择器
css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...
- gitlab+jenkins多项目,多依赖,继承等上下级项目关系的自动部署
案例: 现有三个项目,Common,entity,serviceAPIentity依赖于Common,serviceAPI依赖于entity,也就是说common的下级项目是entity,而entit ...
- 报错解决——SSL: CERTIFICATE_VERIFY_FAILED
SSL: CERTIFICATE_VERIFY_FAILED Python 升级到 2.7.9 之后引入了一个新特性,当使用urllib.urlopen打开一个 https 链接时,会验证一次 SSL ...
- 反射入门-浅谈反射用途_根据Ado游标对象创建list集合
本人大二菜鸟一只,今天在上课期间有个同学看着C#反射的内容说反射没什么用,一时之间也想不到什么更好的例子,就写了个根据泛型类型和游标反射创建List集合的Demo. 首先创建一个用于封装对应数据的en ...
- centos mysql安装 完全版
在linux中安装数据库首选MySQL,Mysql数据库的第一个版本就是发行在Linux系统上,其他选择还可以有postgreSQL,oracle等 在Linux上安装mysql数据库,我们可以去其官 ...
- Centos7限速和测速
限速 wondershaper是国外人开发的一款在Linux内核下基于TC工具的对整块网卡的限度工具. 第一种安装方法 首先下载wondershaper的rpm安装包:wondershaper-1.1 ...