注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

CSS权重的问题:选择器权重值的计算  

2014-08-18 17:51:03|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”。 选择器权重值的计算

A:如果规则是写在标签的style属性中(内联样式),则A=1,否则,A=0. 对于内联样式,由于没有选择器,所以B、C、D的值都为0,即A=1, B=0, C=0, D=0(简写为1,0,0,0,下同)。

B:计算该选择器中ID的数量。(例如,#header 这样的选择器,计算为0, 1, 0, 0)。

C:计算该选择器中伪类及其它属性的数量(包括class、属性选择器等,不包括伪元素)。 (例如, .logo[id='site-logo'] 这样的选择器,计算为0, 0, 2, 0)。

D:计算该选择器中伪元素及标签的数量。(例如,p:first-letter 这样的选择器,计算为0, 0, 0, 2)。

 

CSS2.1中使用一个4位的数字来表示权重,以下是有关权重的一些规定: 
类型选择符的权重为:0001 
类选择符的权重为:0010 
通用选择符的权重为:0000 
子选择符的权重为:0000 
属性选择符的权重为:0010 
伪类选择符的权重为:0010 
伪元素选择符的权重为:0001 
包含选择符的权重为:包含的选择符权重值之和 
内联样式的权重为:1000 
继承的样式的权重为:0000 

 

权重的计算:

01. *{}                         ====》0
02. li{}                        ====》1(一个元素)
03. li:first-line{}             ====》2(一个元素,一个伪元素)
04. ul li {}                    ====》2(两个元素)
05. ul ol+li{}                  ====》3(三个元素)
06. h1+ *[rel=up] {}            ====》11(一个属性选择器,一个元素)
07. ul ol li.red{}              ====》13(一个类,三个元素)
08. li.red.level{}              ====》21(两个类,一个元素)
09. style=""                    ====》1000(一个行内样式)
10. p {}                        ====》1(一个元素)
11. div p {}                    ====》2(两个元素)
12. .sith {}                    ====》10(一个类)
13. div p.sith{}                ====》12(一个类,两个元素)
14. #sith{}                     ====》100(一个ID选择器)
15. body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器,一个类,两个元素)
 
 
 
  评论这张
 
阅读(25)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017