结合很多网上写的区别，但在实践中对子选择器和后代选择器有以下几个疑问：
<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{....} 输出结果：只有①被改变
这和我看到的演示不一样啊！！然后我就迷茫了。。求大神解释！！！！
2018-07-13
同样是新手，看了你问题，也思考了一下，以下愚见：
你的第一个例子下两个<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>
嗯，奇妙。
举报
