...-慕课网

                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

.first{color:green;}权值最大，span{color:pink;}权值为1，那为什么显示的是粉红色呢？

feizq092

2014-07-18

源自：初识HTML(5)+CSS(3)-升级版 9-3

关注问题我要回答

12770

操作

收起

28 回答

purple_yao
2014-07-21

亲，.first{color:green;}是为第一段设置为绿色，当没有span{color:pink;}这条语句时，span会也会显示为green，是因为span继承了.first中的绿色，但当设置了span{color:pink;}这条语句后，span就是会复盖上面继承下来的绿色，因为继承的权值你可以理解是最低的，有的文献中说继承的权值只有0.1。

183 回复有任何疑惑可以回复我~

收起回答

折叠幸福

是不是因为浏览器引擎是覆盖式渲染的？

2014-09-15 回复有任何疑惑可以回复我~

孟玉珏

如果现有这句话span{color:pink;}/*设置为粉色*/，再有将第一段设置为绿色。也就是span{color:pink;}/*设置为粉色*/这条语句写在所有设置样式的前面。结果还是一样？是因为标签的权值大于继承的权值所致吗？

2015-05-19 回复有任何疑惑可以回复我~

wangyt

span 继承过来的权值为0.1，span自身的权值为1，1>0.1所以显示span自身的样式。

2015-06-16 回复有任何疑惑可以回复我~

查看19条回复

慕九州5452425
2017-09-10

span继承.first权值只有0.1 而当前span的值是1 当然是粉色啦

0 回复有任何疑惑可以回复我~

收起回答

莫珞
2017-07-28

还是不是很明白，

p{color:red;}

.first{color:green;}/*因为权值高显示为绿色*/

span{color:pink;}/*设置为粉色*/

p>span{color:purple;}

这些里面.first的权值最高，所以虽然p{color:red;}语句把文字都设置成红色了。第一段还是变成了绿色。那为什么后面两个语句会把.first的设置覆盖掉？

0 回复有任何疑惑可以回复我~

收起回答

默默努力的友人A
2017-06-23

膜拜楼上大神。。。

0 回复有任何疑惑可以回复我~

收起回答

龙信
2017-03-01

@风早君418 直接写span{color:purple;}，按照就近原则，也可以将“胆小如鼠”变为紫色,这没错，但不能就认为写在 p span{color:purple;}前的span{color:pink;}没用了，就近原则是建立在权重一样的条件下的（见第七章7-4），所以在这里，对‘胆小如鼠’而言： p{color:red;}权重为0.1； .first{color:green;}权重为0.1； span{color:pink;} 权重为1； p span{color:purple;}权重为2;2>1>0.1,所以‘胆小如鼠’是紫色，这里老师好像还还没讲，后代选择器可以用在标签上，实例里只给了类选择器，欢迎大家指正

1 回复有任何疑惑可以回复我~

收起回答