.first,#second span{color:green;}</style></head><body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
5 回答
juan_zi
TA贡献22条经验 获得超8个赞
第一段字颜色变是因为你设置了：.first {color:green};所以第一段的字体就都变了
去掉，#second之后就变成了 .first span{color:green}就相当于只对.first这个类里面的span标签设置了样式，所以只变“胆小如鼠“
.first,#second span{color:green;}其实相当于 .first{color:green;}#second span{color:green;}
WingMeng
TA贡献32条经验 获得超13个赞
要弄清这个问题，首先要理解CSS中的一个特性：“继承”。
继承指内部的标签会拥有外部标签某些样式的性质，这些样式有color、font-size、font-family等。上面代码中的 p.first 和 p#second 包含有 span 标签，因此 .first,#second span{color:green;} 这句会让 p.first 整个段落的文字都变成绿色，包括其中的span （span继承了其父容器的color样式）；而第二段应用了#second span {color: green;}，是后代选择器，表示该样式只会应用在 #second 下的 span 标签，所以只有 #second 下的 span标签里的文字“简单”会变绿色。
当你去掉 ,#second 后，CSS代码变为：
.first span {color: green;}此时很明显这条样式只对 .first 下的 span 有效，不涉及第二段中的span，因此只有第一段中的“胆小如鼠”会变色。
慕客学渣会总瓢把子3201537
TA贡献20条经验 获得超29个赞
.first,#second span{color:green;}的意思是类选择器.first和#Idsecond 选择器的后代span变成绿色。你去掉,#second变成了： .first span{color:green;}类选择器的后代span变成绿色。
我就是伸手党
TA贡献19条经验 获得超17个赞
你说你写的是后代选择器还是分组选择器，不要自由发挥，这样没有什么可读性的。
硬要解释的话，".first"和"#second span"构成一个分组选择器，其中"#second span"是个后代选择器，这才造成了你那样的结果。
也没什么优先级可说的，别混着用就行了。
- 5 回答
- 0 关注
- 1737 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消