CSS的后代选择器和子代选择器的区别

桃扇骨 2022-03-14 11:50 367阅读 0赞

1.后代选择器:

写法:$(“ancestor descendant” ,标签之间用空格隔开

例在的代码中写:

  1. <div>
  2. <p>
  3. <span>s1</span>
  4. </p>
  5. <span>s2</span>
  6. <div>
  7. <span>s3</span>
  8. <span>s4</span>
  9. </div>
  10. <span>s5</span>
  11. </div>

而在头标签中的写上:
div div span{ color:red; }指的是div标签下的div标签下的所有span标签都变红,不管是什么层级即s3、s4变红;

2.子代选择器:

写法:$(“parent > child”),标签之间用大于号隔开,指的父标签下的下一个层级的子标签,并不是所有标签

例:div>span{ color:blue; }指的是div标签下的下一个层级的span即s2、s5变成蓝色而不是div里div里的s3、s4;

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,367人围观)

还没有评论,来说两句吧...

相关阅读

    相关 子代选择后代选择

    在CSS3中,我们会遇到这个一个问题,当层级过多的时候,我们想对其中的某些标签进行操作,有时候我们又想只对某一层级的标签进行操作,这个时候就涉及到字标签和后代标签的问题