...-慕课网

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

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

feizq092

2014-07-18

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

关注问题我要回答

12773

操作

收起

28 回答

懒人的懒
2014-12-12

不是这样算的，我的理解是，...............

p class的权重值是1+10=11

而...在中，那么，标签在上面已经声明为粉色，那么span的权重就是=1（p）+10(.first)+1=11权重，所以显示为粉色

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

收起回答

Groune

我认为你的理解有些偏差。以题中代码为例，中的权值为0.1（从父标签继承得来），但第10行span的权值为1。最后显示时虽然标签选择器span的权值仅有1，但也比继承的0.1权值要大。不知道我这样理解对不对，欢迎大家讨论。

2015-03-08 回复有任何疑惑可以回复我~

举个栗子233 回复 Groune

嗯，我觉得你说的是对的，看了你的才明白点。

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

小萝卜water
2014-11-02

继承的权值你可以理解是最低的

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

收起回答

我们是兄弟

你们试着写p span.uh{color：blue}过么，我这样写却没有什么反应这是什么原因。多谢

2015-10-20 回复有任何疑惑可以回复我~

忆_卿回复我们是兄弟

你页面的代码呢？ .uh 你的 span标签是 这样写的？

2016-04-14 回复有任何疑惑可以回复我~

死在互联网路上
2014-11-01

为什么不从第一个pink的span就开始继承？

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

收起回答

死在互联网路上
2014-11-01

span里的pink为什么是灰色而不是黄色？

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

收起回答

慕婉清6604320
2014-10-31

绿色啊

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

收起回答

Z_Johnson
2014-10-17

又因为span标签的权值为1，小于 p span标签权值（p span{color:green;} /*权值为1+1=2*/），所以span就会覆盖成p span便签的颜色

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

收起回答

西风潇潇

p span标签权值应为1.1（p span{color:green;} /*权值为1+0.1=1.1*/）。 p span是继承关系，如果写成（p,span{color:green;}/*权值为1+1-2*/）

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

laobusi
2014-09-28

span继承了.first所以权限最小，同时又声明了span{color:ping;},就会覆盖之前的.first声明，参考@purple

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

收起回答

十年wf

对，span继承了.first 所以成了0.1 紧接着又声明span{color:pink}就把0.1的绿色给覆盖掉了。

2016-08-02 回复有任何疑惑可以回复我~

卡兰尼克

看了你的才看懂谢谢~~

2016-08-23 回复有任何疑惑可以回复我~

njitEric
2014-08-18

我觉得应该将purple说的加到课程中去

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

收起回答

sandogeek

花了10多分钟终于搞懂啦！提主所问的span标签具有三种权值。1、继承自p标签的权值，只有0.1 2、第10行的span选择符产生的权值，其为1 3、第11行的p span产生的权值，其为1+1=2 比较可得，最终样式应为第11行的样式

2016-01-22 回复有任何疑惑可以回复我~

sandogeek

发现上面的解释还是不够准确，想要搞懂可以看以下博文 http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php 玩转CSS选择器（一）之使用方法介绍 - Share - SegmentFault http://segmentfault.com/a/1190000003088878#articleHeader5

2016-01-22 回复有任何疑惑可以回复我~

Asia爱莎回复 sandogeek

你都是怎么找到这些博文的？

2016-09-01 回复有任何疑惑可以回复我~