p{color:red;}
.first{color:green;}/*因为权值高显示为绿色*/
span{color:pink;}/*设置为粉色*/
p span{color:purple;}
权值是层叠样式的优先级以下再算的，也就是说优先满足层叠样式，如果层叠样式的优先级相同，再比较权值。
比较的是两种样式下，span标签的权重值，p span{color:purple;}权重为1+1=2; 而.first{color:green;}于p标签的权重确实为10，但是此时span是继承的权重，仅为0.1，所以0.1要小于2，故显示为紫色。提问中，比较对象错了
第一继承了red被green干掉，继承了green后又被pink干掉（pink无继承），pink又被干掉，从red到purple内联值越来越高所以最后是显示绿的的是被继承+权重，紫色的是继承权重+内联级别越来越高所得出来的。
意思就是span是继承来的,是只有0.1 他的绿色权值只有0.1 所以你看到span{color:pink;}是把绿色干掉了,变成了粉色. 权值10类定义的绿色是指p标签里面的,最后两个标签定义的紫色权值是2,所以把span定义权值1的粉色给干掉了.
楼上回答的都是啥啊，没看清问题吗
优先级：内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式，
所以这个问题的优先级应该是：.first（类） > p span （标签加权） > span（标签） > p（继承），
你这显示紫色我觉得大概是你在 span 元素上没加 first 这个 class，或者你加到 p 标签上了，这样它就是一个继承样式。
我估计span绿色属性是继承得来的，权值只有0.1。
层叠性应该大于权值性。你上面的代码不仅紫色会盖住绿色，，粉色都会盖住绿色。。然而绿色的权值是最高的。