请选择进入手机版 | 继续访问电脑版

设为首页收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 地图任务 - 给官方提建议

论坛活动及任务 归纳网站最新活动更新邮件保护帐号安全 第一季积分兑换活动 - 12周年上海聚会照片

万元奖励等你拿——点点网模板设计大赛 畅销译文征名——让最火的畅销书，印上你的标签 联系招聘客服蓝色理想帮你找工作！

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › css权重是怎么算的

发新帖

查看: 3044|回复: 17

css权重是怎么算的 [复制链接]

nbh002　楼主

帖子: 84
体力: 234
威望: 0

发表于 2008-4-19 16:46:43 |显示全部楼层

<style>
p.class1 {background-color:blue;}
div .class1{background-color:yellow;}
</style>

<div>
<p class=class1>
abc
</p>
</div>

上面的p.class1权重应该是11吧，div .class1的权重也是11吧，权重相同的情况下，就应该取下面的div .class1，但是实际是取了上面的p.class1

为什么呢？

西部数码顶级域名注册商39元抢注！

使用道具举报

10dw　

小盆友

帖子: 474
体力: 1851
威望: 0
居住地: 美洲美国

发表于 2008-4-19 16:49:31 |显示全部楼层

因为div没有class attr更没有value class1

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

崔凯

钻石会员 

帖子: 2931
体力: 7373
威望: 16

发表于 2008-4-19 16:54:18 |显示全部楼层

提示：您可以先修改部分代码再运行

这样比较清楚一点。

前端开发 http://uicss.cn/fed-book/

使用道具举报

崔凯

钻石会员 

帖子: 2931
体力: 7373
威望: 16

发表于 2008-4-19 16:55:58 |显示全部楼层

如果没有高度和宽度的定义，就是这样的：

P在最里层，所以给最里层的背景。

提示：您可以先修改部分代码再运行

前端开发 http://uicss.cn/fed-book/

使用道具举报

nbh002　楼主

帖子: 84
体力: 234
威望: 0

发表于 2008-4-19 17:29:43 |显示全部楼层

原帖由 cuikai 于 2008-4-19 16:55 发表
如果没有高度和宽度的定义，就是这样的：

P在最里层，所以给最里层的背景。

如果按照P在最里层的说法，为什么下面的代码显示黄色呢？
<style>
p {background-color:blue;}
div .class1{background-color:yellow;}
</style>

<div>
<p class=class1>
abc
</p>
</div>

使用道具举报

帖子: 109
体力: 3713
威望: 0
居住地: 湖南省长沙市

发表于 2008-4-19 17:37:05 |显示全部楼层

因为p是1，
div是1 .class1是10，加起来就有11了，当然是yellow。

使用道具举报

nbh002　楼主

帖子: 84
体力: 234
威望: 0

发表于 2008-4-19 17:40:43 |显示全部楼层

原帖由 janelee 于 2008-4-19 17:37 发表
因为p是1，
div是1 .class1是10，加起来就有11了，当然是yellow。

那p后面加上.class1，p.class1也是11啊，怎么就是蓝色呢？

使用道具举报

帖子: 109
体力: 3713
威望: 0
居住地: 湖南省长沙市

发表于 2008-4-19 17:42:52 |显示全部楼层

提示：您可以先修改部分代码再运行

提示：您可以先修改部分代码再运行

都搞晕了。
相同了，还是谁后定义谁优先的。
第一个：p.class1 {background-color:blue;}后，所以蓝色
第二个：div .class1{background-color:yellow;}后，所以黄色

[ 本帖最后由 janelee 于 2008-4-19 17:48 编辑 ]

使用道具举报

nbh002　楼主

帖子: 84
体力: 234
威望: 0

发表于 2008-4-19 17:47:31 |显示全部楼层

可是p.class1定义在 div .class1前面啊

使用道具举报

帖子: 109
体力: 3713
威望: 0
居住地: 湖南省长沙市

发表于 2008-4-19 17:51:39 |显示全部楼层

原帖由 nbh002 于 2008-4-19 16:46 发表

p.class1 {background-color:blue;}
div .class1{background-color:yellow;}

abc

上面的p.class1权重应该是11吧，div .class1的权重也是11吧，权重相同的情况下，就应该取下面的div . ...

我晕了。你自己试试，是取的div .class1{background-color:yellow;} 黄色啊!

使用道具举报

10dw　

小盆友

帖子: 474
体力: 1851
威望: 0
居住地: 美洲美国

发表于 2008-4-19 17:51:48 |显示全部楼层

<style>
p.class1 {background-color:blue;}
div p.class1{background-color:yellow;}
</style>
<div>
<p class=class1>
abc
</p>
</div>

写了又不看刷屏很有意思? 自己写的不靠谱在这较真

使用道具举报

nbh002　楼主

帖子: 84
体力: 234
威望: 0

发表于 2008-4-19 17:59:31 |显示全部楼层

原帖由 10dw 于 2008-4-19 17:51 发表

p.class1 {background-color:blue;}
div p.class1{background-color:yellow;}

abc

写了又不看刷屏很有意思? 自己写的不靠谱在这较真

没有这个P

使用道具举报

中级会员 

帖子: 57
体力: 212
威望: 0

发表于 2008-4-19 18:38:36 |显示全部楼层

提示：您可以先修改部分代码再运行

是没有p啊

Design

使用道具举报

帖子: 75
体力: 325
威望: 0
居住地: 广东省茂名市

发表于 2008-4-19 20:23:05 |显示全部楼层

FF是黄,IE7是蓝。特性相同当然后定义的优先！

使用道具举报

怿飞

帖子: 2374
体力: 12538
威望: 125
居住地: 浙江省杭州市

发表于 2008-4-19 21:15:03 |显示全部楼层

记住两点，就可以精通CSS权重了。
第一点：

每个ID选择符(#someid)，加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0
每个元素或伪元素(:firstchild)等，加0,0,0,1
其他选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。

第二点：

文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style=”color: red”>blah</div>的样式，而外部定义指经由<link>或<style>标签定义的规则。
有!important声明的规则高于一切。
如果!important声明冲突，则比较优先权。
如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
关于经由@import载入的外部样式，由于@import必须出现在所有其他规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

nbh002　楼主

帖子: 84
体力: 234
威望: 0

发表于 2008-4-20 11:20:25 |显示全部楼层

谢谢各位，这下对CSS的权重算比较清楚了，而我这个问题，也确实是IE的不标准造成的

使用道具举报

zj1118

帖子: 152
体力: 646
威望: 0

发表于 2008-4-20 12:00:54 |显示全部楼层

#15
继承高于!important的例子：

提示：您可以先修改部分代码再运行

使用道具举报

怿飞

帖子: 2374
体力: 12538
威望: 125
居住地: 浙江省杭州市

发表于 2008-4-20 20:36:17 |显示全部楼层

@楼上权重和继承是两回事！！

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-1-15 00:09 , Processed in 0.389447 second(s), 8 queries , Gzip On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部