CSS:重量和级联规则,确定其优先级
资源:http://www.ido321.com/1063.html
首先,给大家看一篇关于CSS优先级的演示样例:http://www.ido321.com/76.html
一、主要的优先级规则
比較同一级别的个数,数量多的优先级高,假设同样即比較下一级别的个数。至于各级别的优先级例如以下:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承
二、CSS权重规则
在《页面重构中的模块化设计》中提到,影响CSS样式权重,有两个重要因素:
A:样式的优先级跟样式定义的顺序有关
B:权值的大小跟选择器的类型和数量有关
一般来说,在同一个CSS文件里,假设有两个同名的样式。则后定义的会覆盖先定义的。
选择器类型的优先级见(一)。
那么,CSS的权重是怎么算的呢?
一个selector的权重表示方式:0.0.0.0,依照计算规则给每位填充数字,相应位置相等,则比較下一位。
权重的计算规则例如以下:(为方便,用A.B.C.D取代各位置的值)
1、内嵌样式:A=1,B=C=D=0(即1.0.0.0)
2、ID样式:selector中带几个ID,第2位就加几个1 如#header{color:red}。就是A=C=D=0,B=1(即0.1.0.0)
3、类,伪类,以及属性的个数就是第三位的值:
.a.b[type="text"]:hover{}。选择器中有2个类,1个属性,1个伪类,所以它的第3位为4, A=B=D=0,C=4,(即0.0.4.0)
4、伪元素和标签元素的个数就是第四位的值
p:first-letter。有一个标签元素p和伪元素first-letter,值为2,A=B=C=0,D=2(即0.0.0.2)
5、通配符和继承得到的CSS属性对权重没有影响
三、几个演示样例
针对以上,看下面几个演示样例
1、.a .b .c {color:red;} //0.0.3.0 说明:仅仅有三个类
2、*
{…} //0.0.0.0 说明:通配符对权重没有影响
3、.a .b a {color:green} //0.0.2.1 说明:两个类和一个标签
4、#hid {color:black;} //0.1.0.0 说明:仅仅有一个ID
版权声明:本文博客原创文章,博客,未经同意,不得转载。
CSS:重量和级联规则,确定其优先级的更多相关文章
- CSS学习笔记3:选择器及优先级
CSS选择器的类型: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器 1.标签选择器: 以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了 ...
- html页面的CSS、DIV命名规则
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- css,html命名规则
css,html命名规则 页头: header 登录条: loginBar 标志: logo 侧栏: sideBar 广告: banner 导航: nav 子导航: subNav 菜单: menu 子 ...
- CSS学习笔记(7)--html页面的CSS、DIV命名规则
html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...
- CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...
- 2CSS层叠规则(即引入CSS的三种不同方式的优先级)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- 记录:CSS特殊性——权值规则
浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...
随机推荐
- [条款36]绝不重新定义继承而来的non-virtual函数
看下面的两个类的声明代码: class B { public: void mf(); //something to do }; class D : public B { public: void mf ...
- a标签阻止跳转的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js中设置setInterval的注意点
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 在myeclipse中修改svn帐户
把C:\Users\Administrator\AppData\Roaming\Subversion\auth\这个文件中所有文件删除 然后在myeclipse中同步会让你输入用户名和密码
- python--help
python help 学习python的过程中,难免遇到一些生疏的东西,为此需要参看相关的文档说明. Linux下众所周知有man可以查找系统的命令帮助页:对于python也提供了自己的帮助文档的2 ...
- (Problem 57)Square root convergents
It is possible to show that the square root of two can be expressed as an infinite continued fractio ...
- Objective-c 截取子字符串
NSString类中提供了这样三个方法用于获取子字符串: – substringFromIndex: – substringWithRange: – substringToIndex: 它们该怎么使用 ...
- CSDN书籍下载
http://download.csdn.net/user/vanridin/uploads/38 (2016英文书下载) http://download.csdn.net/user/ramissue ...
- DataReader的例子
前: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataReader对 ...
- VBS脚本病毒特点及如何防范3(转)
5.Vbs病毒生产机的原理介绍 所谓病毒生产机就是指可以直接根据用户的选择产生病毒源代码的软件.在很多人看来这或许不可思议,其实对脚本病毒而言它的实现非常简单. 脚本语言是解释执行的.不需要编译,程序 ...