老师，任务提示：注意选择器的权值问题，那么它的选择器权值必须要高，否则不起作用。第一种写法设置红色字体的权值没有设置绿色的高，为什么运行出来还是可以显示红色的？
来源：3-40 编程练习
临溪倚山靠
2021-08-26 08:53:07
1.
<style>
/* 权值：（1，1,1,） */
#div .p2 span {
color:green;
}
/* 权值：（0，1,1,） */
.p1 span {
color: red;
}
</style>
2.
<style>
/* 权值：（1，1,1,） */
#div .p2 span {
color:green;
}
/* 权值：（1，1,2,） */
#div p.p1 span {
color: red;
}
</style>
两种写法的运行结果一样。但任务提示：注意选择器的权值问题，那么它的选择器权值必须要高，否则不起作用。第一种写法设置红色字体的权值没有设置绿色的高，为什么运行出来还是可以显示红色的？
1回答
-
好帮手慕久久
2021-08-26
同学你好，同学将任务提示的意思理解错了，具体如下：
1、选择器只要书写的符合规范，都是会起作用的。因此.p1 span 这个选择器会让“ <span>权值不同，</span>”显示红色。
2、如果有多个选择器作用在同一个元素上，才需要考虑权值问题；此时权值高的选择器会起作用，权值低的无效。以如下代码为例，给同学讲解一下习题中的任务、任务提示的意思：
1）任务的第一步，是让大家将所有span设置成绿色：
而任务提示的第一步则提示大家，可以通过后代选择器，实现习题中任务的第一步：
对应如下代码：
2）任务的第二步，是让大家继续设置样式，让“权值相同”几个字，变成红色：
即“权值相同”几个字需要再添加选择器；由于第一步 #div span这个选择器会作用到“权值相同”几个字，所以“权值相同”就会受到多个选择器作用，此时要考虑权值问题。因此，任务提示的第二步，则提到了权值的问题：
对应如下代码：
同学的两种写法，与习题要求是不符的；二者都是分别设置不同p下的span，例如：
根本不涉及到“同一个元素，有多个样式”这种情况，因此根本不用考虑权值问题。
祝学习愉快！
1
相似问题