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

字体颜色没有改变，请求指导

我把字号改大了一点方便查看效果，第一段span标签中的文字的颜色并没有改变，之前的优先级不是说就近原则的吗，为什么没有变呢，麻烦知道的指导一下。

小竹摇曳

2016-09-07

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

关注问题我要回答

1252

操作

收起

6 回答

慕粉3930173 回答被采纳 +3 积分
2016-09-07

.first>span,#second>span{color:green;font-size:20px:}

或者.first,#second span{color:green;font-size:20px:}

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

收起回答

小竹摇曳提问者

就是按照你的第二种写法写的，但是第一段的胆小如鼠四个字还是红色的，第二段的倒是设置成功了。

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

慕粉3930173 回复小竹摇曳提问者

这是涉及9-2 权值问题。h1,span{color:red;}对于第一段里面span那段相当于.first span{color:red;}权值为10+1=11，而.first,#second>span{color:green;}对于第一段里面span那段相当于.first{color:green;}权值=10小于11 所以 h1,span{color:red;}这句权值大，所以优先级高

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

慕粉3930173 回复小竹摇曳提问者

就近原则是在权值相等情况下才能采用，如果你想把胆小如鼠4个字改成绿色.first span,#second>span{color:green;} 或者 .first>span,#second>span{color:green;font-size:20px:}这两种都行

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

查看2条回复

枯木里有龙吟
2016-09-07

我的意思是第一段先被.first{}渲染成绿色，20px，到胆小如鼠时，胆小如鼠被span{color ：red}二次渲染成了红色，你的问题是你以为你的代码是为两个span都设置了两个样式，看哪个会生效，实际上是，第一个span先被渲染成了绿色（这次是因为它是p标签的子标签，由于样式的继承性，也被渲染了），你设置的span{red}作用在了第一个标签上，#second>span{}作用在了第二个标签上

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

收起回答

小竹摇曳提问者
2016-09-07

为什么换了id选择器还是没有效果啊

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

收起回答

枯木里有龙吟
2016-09-07

ID选择器在HTML文档中只能使用一次，仅一次，在第二段的“简单”上生效了，就没了。那么第一段的“胆小如鼠”就只设置了一个样式，没有优先级可言

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

收起回答

小竹摇曳提问者

可是第一段是类选择器啊，而且除了span标签中的文字颜色也都设置上了，按照你这种说法说不通啊。

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

慕粉3930173

.span是类选择器 #second才是ID选择器

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

枯木里有龙吟回复小竹摇曳提问者

说的通。代码先执行到第一段开始处p标签，要进行渲染，会通过设置的class="first"找到样式，将第一段渲染成绿色，20px（CSS的某些样式是具有继承性的，color和font-size显然具有继承性，而span标签是p标签的子元素，所以也会被渲染），然后再执行，发现第一段里面还有个span标签，而且单独设置了样式{color : red},这时，胆小如鼠会被二次渲染为红色。由于ID选择器的优先级高于类选择器，所以第二次设置的>span{color:green; font-size : 20px}作用在了第二段的“简单”上，而ID选择器只能生效一次

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