大佬们救救我啊啊啊啊啊

来源:8-7 这么快就当爷爷了? - 后代选择器

能小白

2018-07-13 10:04

结合很多网上写的区别,但在实践中对子选择器和后代选择器有以下几个疑问:

  1. <p class="A">....<span>①</span>.............<span>②</span>...............</p>

    后代选择器:. A span{.....}    输出结果:①②均被改变

    子选择器:.A>span{....}       输出结果:①②均被样式改变了!!真的!!!!我不懂这是什么操作,不是应该只有①改变么!!

  2. <p class="A">....<span>①</span>.........<p>....<span>②</span>.......</p>........</p>

    后代选择器:. A span{.....}    输出结果:只有①被改变了啊啊啊啊啊啊!!!!什么操作啊!!

    子选择器:.A>span{....}       输出结果:只有①被改变


这和我看到的演示不一样啊!!然后我就迷茫了。。求大神解释!!!!

写回答 关注

5回答

  • 慕沐7363818
    2018-07-31 23:38:43

    我试过了,你可以修改例2中间<p class ="first">。。。</p>.span两种方式都会有效果。

    另外第一次听说段落嵌套段落

    iMOOCE... 回复iMOOCE...

    https://blog.csdn.net/Call_me_small_pure/article/details/78020681

    2018-08-05 21:22:26

    共 3 条回复 >

  • 慕斯卡1556068
    2018-07-17 11:21:40
    1. <span>没有嵌套,所以子选择器不对

    2. 将<p>删除

    iMOOCE... 回复能小白

    第二个不是嵌套,是因为第二个<span>不是<p>的后代,它不在第一个span所属的段落;改为<p class="A">....<span>①</span>........<span>②</span>.......</p>...<p>.....</p>;每一个起始标签p都有自己的赋予属性,第二个p没有给予赋予的属性。

    2018-08-05 20:54:11

    共 7 条回复 >

  • 慕先生5247145
    2018-07-14 01:18:48

    “另外,感觉你的第二个举例实际上变成了:

    <p class="A">....<span>①</span>.........</p><p>....<span>②</span>.......</p><p>........</p>

    嗯,奇妙”

    不好意思打错了~


  • 慕先生5247145
    2018-07-14 01:16:54

    同样是新手,看了你问题,也思考了一下,以下愚见:

    你的第一个例子下两个<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>

    嗯,奇妙。

    能小白

    虽然我还是认同你说的加class解决的方法,但是还是。。。哈哈哈哈哈哈

    2018-07-16 09:50:38

    共 2 条回复 >

  • 慕的地2208911
    2018-07-13 10:18:07

    这个我不会

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225810 学习 · 18234 问题

查看课程

相似问题