能小白
2018-07-13 10:04
结合很多网上写的区别,但在实践中对子选择器和后代选择器有以下几个疑问:
<p class="A">....<span>①</span>.............<span>②</span>...............</p>
后代选择器:. A span{.....} 输出结果:①②均被改变
子选择器:.A>span{....} 输出结果:①②均被样式改变了!!真的!!!!我不懂这是什么操作,不是应该只有①改变么!!
<p class="A">....<span>①</span>.........<p>....<span>②</span>.......</p>........</p>
后代选择器:. A span{.....} 输出结果:只有①被改变了啊啊啊啊啊啊!!!!什么操作啊!!
子选择器:.A>span{....} 输出结果:只有①被改变
这和我看到的演示不一样啊!!然后我就迷茫了。。求大神解释!!!!
我试过了,你可以修改例2中间<p class ="first">。。。</p>.span两种方式都会有效果。
另外第一次听说段落嵌套段落
<span>没有嵌套,所以子选择器不对
将<p>删除
“另外,感觉你的第二个举例实际上变成了:
<p class="A">....<span>①</span>.........</p><p>....<span>②</span>.......</p><p>........</p>
嗯,奇妙”
不好意思打错了~
同样是新手,看了你问题,也思考了一下,以下愚见:
你的第一个例子下两个<span>标签应该都第一代子元素,所以无论是用子选择器和后代选择器,输出结果应该是一样的。
按照教程中给的例子,你可以试着写下<p class="A">....<span>①...<span>②</span>....</span></p>
再分别用后代选择器和后代选择器试,结果是不一样的。
第二个例子<p class="A">....<span>①</span>.........<p>....<span>②</span>.......</p>........</p>中
是不是可以理解为类别器名称A中的css样式只修饰第一个<p>标签下被<span>标签标记的内容,因为可以看到两个<p>标签,而②是第二个<p>标签下被标记的内容,如果同样要作用到它,应该在第二个<p>标签中同样用class="A"说明,写成:
<p class="A">....<span>①</span>.........<p class="A">....<span>②</span>.......</p>........</p>
<hr />
另外,感觉你的第二个举例实际上变成了:
<p class="A">....<span>①</span>.........</p><p class="A">....<span>②</span>.......</p><p>........</p>
嗯,奇妙。
这个我不会
初识HTML(5)+CSS(3)-升级版
1225810 学习 · 18234 问题
相似问题