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

既然span是继承权限最低，为何不跟随p的red属性

初始代码中，把 span{color:pink;}/*设置为粉色*/删掉，“胆小如鼠”四个字是绿色，如果按照楼下亲的说法，继承是最小的权重。那这里span里的胆小如鼠应该是跟着p{color:red;}变成红色才对。但是把p{color:red}中的P换成*，变成通用选择器 *{color:red} 后，胆小如鼠四个字变成红色。所以这里的意思是 *通用选择器的权重>span的继承>p的标签权重吗？求解惑惑惑惑惑惑惑惑惑惑惑惑惑——

鹿棉3401080

2016-05-24

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

关注问题我要回答

1143

操作

收起

4 回答

六小弦
2016-06-10

严格点说，通配选择器特殊性为0，而继承的特殊性是“无”。0是大于无的。

span{color:pink;}
p{color:red;}
*{color:purple;}
.first{color:green;}

看了一下你上面回复里写的。

首先span是针对胆小如鼠这四个字的。特殊性是1

p是针对所有段落的，一个元素选择器，所以特殊性为1。但对胆小如鼠四个字来说，是继承来的，所以是无

通配上门说了是0

.first是类选择器，特殊性是10。但对胆小如鼠四个字来说，也是继承来的，所以是无

所以针对胆小如鼠这四个字这里span>*>first>p

而p span是两个元素的元素选择器，它与span一样针对胆小如鼠四个字,特殊性两个相加是2.所以大于span.

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

收起回答

高逗包的何大头
2016-05-24

span和p在CSS框架里都属于标签，而标签的权重都是1，所以选择的是靠后的span来显示；如果有span{color:某个颜色;}，则这里的span就不再当做p的继承来显示了，所以span里的胆小如鼠应该还是是跟着他自己的颜色。但选择器的权重还是死最大的，继承仍然是最小的

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

收起回答

鹿棉3401080 提问者

p{color:red;} .first{color:green;}/*因为权值高显示为绿色*/ </style> </head> <body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> …… 这个代码里，SPAN到底是继承的fist还是继承的p,为什么会显示绿色。

2016-05-24 回复有任何疑惑可以回复我~

sgbb88 回复鹿棉3401080 提问者

p的权值为1，。fist的权值为10，浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式，所以显示绿色，还有span继承的是p的，代码上p有两个css样式，.first的权值高，所以就显示为绿色本人初学者，这只是我自己的理解

2016-05-28 回复有任何疑惑可以回复我~

六小弦回复鹿棉3401080 提问者

两个都继承了，而且继承了以后特殊性都是“无”。但first写在下面一些，重要性比p高，所以first生效

2016-06-10 回复有任何疑惑可以回复我~

qq_我爱迩丶不是说说而已_03384181
2016-05-24

你设置三个标签的css样式 span｛color：blue；｝ p｛color：red；｝＊｛color：green｝然后你看看效果一看你就知道了span是蓝色说明 span权值>p p便签的文字是红说明 p>＊所以 span>p>*，简单的来说他还是按照就近原则。

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

收起回答

鹿棉3401080 提问者

我写了： span{color:pink;}/*设置为粉色*/ p{color:red;} *{color:purple;} .first{color:green;}/*因为权值高显示为绿色*/ 结果发现 span>first>p>*，span权重不是1吗？怎么会大于类的10？这课真是绕不懂。

2016-05-24 回复有任何疑惑可以回复我~

鹿棉3401080 提问者

span{color:pink;} p{color:red;} *{color:purple;} .first{color:green;} 纠错一下上面的，我把诠释删掉了，上面这串写完，看最后的显示样式就是： span>first>p>*，于是，课程让我们最后添加 p span{color:purple;},这里的权重变成：p span>span>first>p>*？我感觉这课我是搞不懂了，听人说权重也没什么大问题。

2016-05-24 回复有任何疑惑可以回复我~