资讯专栏INFORMATION COLUMN

课时71.后代选择器(掌握)

lixiang / 1112人阅读

摘要:什么是后代选择器作用找到指定标签的所有后代标签,设置属性。首先你要明确什么是后代你的儿子,孙子,重孙子等,只要有你的血脉的,都是你的后代。

1.什么是后代选择器?

作用:找到指定标签的所有后代标签,设置属性。

首先你要明确什么是后代?

你的儿子,孙子,重孙子等,只要有你的血脉的,都是你的后代。

我们先来举个例子

我们想让div中的标签变红

1.用标签选择器可以做吗?

不可以,它会选中页面上的所有p,包括div以外的

2.用id选择器可以做吗?

可以,可以给div中的两个p设置id,然后通过id选择器给这两个p设置颜色

3.用class选择器可以做吗?

可以,分别给它们设置class,然后设置颜色

但是无论是用id,class选择器都有一个弊端,就是如果一个界面,div中有成千上万个p怎么办?难道你要一个个的去设置?这样工作量就比较大了,所以要用到一个后代选择器。

格式:

标签名称1 标签名称2{
         属性:值;

}

先找到标签名称叫做标签名称1的标签,然后再在这个标签下面去查找所有名称叫做标签名称2的标签,然后再设置属性

div p{}

注意点:

1.后代选择器必须用空格隔开

2.后代不仅仅是儿子,也包括孙子/重孙子,只要最终是放到指定标签中的都是后代

3.后代选择器不仅仅可以使用标签名称,还可以使用其它选择器

1.将id名称与标签名称结合使用

    

2.将类名称与标签名称结合使用

   

3.将id名称与id名称结合使用

    

4.将id名称与类名称结合使用

  

我们在这里需要补充一点:后代选择器可以无限的往下延伸

  

有一个空格代表是一个后代

div  ul代表先找到div,从div中找到所有名字叫做ul的后代,只有一个名字叫做ul的,然后再来个空格,代表着从ul中去找到名称叫做li的后代,那我们这里有几个li的后代呢?我们可以找到两个,后面又有了空格,代表着从li里面去找p的后代,先找到li里面叫做p的后代,找到了,就设置颜色,而第二个里面没有名字叫做p的后代,就没有找到,没有找到就什么都不做,而如果第二段li中也有p,那么就会有两个p变颜色。

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2125.html

相关文章

  • 课时72.子元素选择掌握

    摘要:什么是子元素选择器作用找到指定标签中所有特定的直接子元素,然后设置属性。子元素选择器可以通过符号一知延续下去1.什么是子元素选择器? 作用:找到指定标签中所有特定的直接子元素,然后设置属性。 格式: 标签名称1>标签名称2{                          属性:值; } 先找到名称叫做标签名称1的标签,然后在这个标签中查找所有直接子元素名称叫做标准名称2的元素    注意...

    Bowman_han 评论0 收藏0
  • 课时73.后代选择和子元素选择(理解)

    摘要:后代选择器和子元素选择器之间的区别后代选择器使用空格作为连接符号子元素选择器使用作为连接符号后代选择器会选中指定标签中,所有的特定后代标签,也就是会选中儿子孙子,只要是被放到指定标签中的特定标签都会被选中。1.后代选择器和子元素选择器之间的区别? 1.1后代选择器使用空格作为连接符号 子元素选择器使用>作为连接符号 1.2后代选择器会选中指定标签中,所有的特定后代标签,也就是会选中儿子/孙子...

    yangrd 评论0 收藏0
  • 我是如何学习游戏引擎的?

    摘要:下面列举了游戏开发中常见的岗位以及两条常见的协作开发的流水线其实学习游戏引擎,前期对于任何岗位来说路线都是相似的,基本上就是一个熟悉基本操作理解基本概念拓展专业知识的过程。当然这不是绝对的,任何引擎的开始阶段和大成阶段都是相似的。 这是【游戏开发那些事】第51篇原创 前言:游戏引擎,表面...

    未东兴 评论0 收藏0
  • 课时82.选择练习

    摘要:现在,我有一个需求,我要求将中的两个标签设置为红色,要求用前面所有学过的选择器来做这个练习。 现在,我有一个需求,我要求将div中的两个p标签设置为红色,要求用前面所有学过的选择器来做这个练习。 1.标签选择器 2.id选择器 3.类选择器 4.后代选择器 5.子元素选择器 6.交集选择器 7.并集选择器 8.通用兄弟选择器 9.序选择器 先找到同类型的p,n从0开始,先选...

    nihao 评论0 收藏0
  • 课时76.兄弟选择掌握

    摘要:我们先来明确一点,什么是兄弟比如,和是兄弟,必须是同级关系,如果是嵌套关系,儿子,孙子则不可以。我们先来明确一点,什么是兄弟? 比如,head和body是兄弟,必须是同级关系,如果是嵌套关系,儿子,孙子则不可以。 1.相邻兄弟选择器 CSS2 作用:给指定选择器后面紧跟的那个选择器选中的标签设置属性 格式:       选择器1+选择器2{             属性:值; } 我们将两...

    snowLu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<