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

奇葩疑问！权值;标签，类选择符和id选择符，下面的写法到底是组合使用还是分组使用？

好几个问题。

一，子选择符和后代选择符写法分别是：（ class命名P为name,文本中加个span的情况下。） “.name>span"和".name span" 没错吧? 这是语法吗？这样写与把”.name"换成p 有什么区别？前面的".name"属于什么？后面的“>span” 和“空格span”又是什么？

他们在权值计算中扮演什么角色？？？

如下权值计算为例：

p{color:red;} /*标签，权值为1*/

p span{color:green;} /*两个标签，权值为1+1=2*/ （疑问A）

p>span{color:purple;}/*权值与上面的相同，因此采取就近原则*/（疑问A）

.warning{color:white;} /*类选择符，权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

疑问A 中，p>span 和p空格span 这是标签？忽略大于号和空格去计算权值的？他们不应该是一个整体吗？或者那个“p span"不看成后代选择器。

又有问题了，就是说为例的代码全部都是空格组合在一起的，还有分组选择符怎么算权值？那都是逗号。分组选择符除了标签之外，能把类、子等选择符放一起分组吗？

然后权值怎么算？

求大神求大神，我感觉大神们一看我的各种提问就应该知道我是因为那里的概念出问题才这样的。求解啊求解！

霸气的擎宇

2016-06-18

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

关注问题我要回答

886

操作

收起

3 回答

WeldonWang 回答被采纳 +3 积分
2016-06-18

.name是类选择器，权值为10，p是标签选择器，权值为1，两个的区别就是这样

>span指的是父类选择器中的第一代子代span元素，空格span指的是父类选择器中所有子类的span元素

p>span和p span的权值是一样的

选择器的权值是对某一个具体的元素标签来说的，比如说

测试一

<a id="second">测试二</a>

对上面的两个标签用类选择器指定样式：

p, a span{ color : red; }

那么这样的话对测试一也是就p中的span来说，权值就是p+span=2

对a值中的span来说也是a+span=2

如果把样式指定为如下这样

.first, #second span{ color:green; }

则测试一的权值就变成了 .first+span=11

测试二的权值则为 #second+span=101

解答的不好，如果有什么问题欢迎为我指正，谢谢！

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

收起回答

KFEB5

p,a span{}难道等价于 p span{};a span{};?

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

KFEB5 回复 KFEB5

实际测试了一下，并不是这样的，p 是一组，a span 是一组。 p,a span{font-weight:bold;color:red;} span{color:black;} p{color:black;} a{font-weight:bold;} 测试一下上面的样式就会发现，你讲的基本是错的

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

霸气的擎宇提问者回复 KFEB5

应该是等价于p{} 和a span{} 用了逗号就是分组了！这里没有用逗号，表明一个组合也就是你说的描述该元素的所有符号而已，写得多只是因为详细一点，通俗的说法就是，写的越详细表明越重视，权值自然要相加去计算！比如html body p span{} 这段代码实际上仅仅作用于span而已，相当于span{} 没说错吧？

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

查看2条回复

qq_落叶终未有_0
2016-06-18

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

p{color:red;}
.first{color:green;}
三年级时，我还是一个胆小如鼠的小女孩。

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/

所以你上面的是两个；一个是比较一个是；两个标签合为一个标签合成的标签权值大所以会出现权值大的结果

如果还是不懂可以看 http://www.imooc.com/code/2039

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

收起回答

霸气的擎宇提问者

谢谢！

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