精华内容
下载资源
问答
  • css后代选择器和子选择器的区别:用法不同,兼容性,所达到的效果不同等等,需要了解的朋友可以参考下
  • 主要介绍了css串联选择器和后代选择器使用方法,需要的朋友可以参考下
  • 串联选择器作用在同一个标签上,后代选择器作用在不同标签上,下面通过示例为大家介绍下两种选择器的应用,喜欢的朋友可以看看
  • 选择器和后代选择器的区别

    千次阅读 2019-07-08 18:43:47
    选择器和后代选择器 很多人容易把两者的混在一起,代选择器只能选择元素的代,而他的孙代、曾孙不能被选上,后代选择器可以选代、孙代、曾孙的元素。下面看个例子 <!DOCTYPE html> <html> &...

    关于选择器自己的领悟

    • 子代选择器和后代选择器

      很多人容易把两者的混在一起,子代选择器只能选择元素的子代,而他的孙代、曾孙不能被选上,后代选择器可以选子代、孙代、曾孙的元素。下面看个例子

       <!DOCTYPE html>
      <html>
      <head>
      <title>选择器</title>
      </head>
      <body>
      <div class="first">
      	<div class="second">
      		<p>子代</p>//first的子代
      		<div>
      			<p>孙代</p>//first的孙代
      			<div>
      				<p>曾孙</p>//firs的曾孙代
      			</div>
      		</div>
      	</div>
      	<div class="third">//first的第二个子代、second的兄弟
      		<P>兄弟</P>
      	</div>
      </div>
      </body>
      </html>
      

      上面用HTML元素展示了他们的关系,没有加上css的效果如下

      在这里插入图片描述
      下面加上后代选择器

      .first p{//注意有个空格
      		color: red;
      }
      

      效果如下
      在这里插入图片描述
      而如果使用的是子代选择器

      .second > p{
      		color: red;
      }
      

      注意的不是.first > p,因为first的子代只有div元素,没有p元素,而second的子代有p元素和div元素,second的孙代也有p元素,但没有渲染。效果如下
      在这里插入图片描述

    • 兄弟选择器

      兄弟选择器只能选择所选元素的后面兄弟元素,不能选择前面的兄弟元素

      .second + .third p{
        	color: red;
      }
      

      我们选了second类的一个兄弟下的p元素,效果如下
      在这里插入图片描述
      如果代码是

      .third + .second p{
        	color: red;
      }
      

      他们的兄弟元素下的second下的p元素不会被选渲染

    展开全文
  • 后代选择器 1.什么是后代选择器? 作用: 找到指定标签的所有特定的后代标签, 设置属性 格式: 标签名称1 标签名称2{ 属性:值; } 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签...
    1. 后代选择器
      1.什么是后代选择器?
      作用: 找到指定标签的所有特定的后代标签, 设置属性

    格式:
    标签名称1 标签名称2{
    属性:值;
    }
    先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
    div p{}

    注意点:
    1.后代选择器必须用空格隔开
    2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
    3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
    4.后代选择器可以通过空格一直延续下去

    1. 子选择器
      1.什么是子元素选择器?
      作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

    格式:
    标签名称1>标签名称2{
    属性:值;
    }
    先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

    注意点:
    1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
    2.子元素选择器之间需要用>符号连接, 并且不能有空格
    3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
    4.子元素选择器可以通过>符号一直延续下去

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

    2.后代选择器和子元素选择器之间的共同点
    2.1
    后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
    2.2
    后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
    选择器1>选择器2>选择器3>选择器4{}

    3.在企业开发中如何选择
    如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
    如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

    展开全文
  • CSS子类选择器和后代选择器的区别

    千次阅读 2018-08-09 15:46:02
    后代选择器则指的是作用于所有后代元素,通过空格来进行选择。 话不多说,接下来通过代码给大家演示。 二.举例 &lt;ul class="clothes"&gt; &lt;li&gt;衣服 &l...

    一.介绍

    • 1.子类选择器

      子类选择器仅仅指的是父元素的直接后代,大家可以理解为仅作用于第一代子元素,通过“>”进行选择。
      
    • 2.后代选择器

      后代选择器则指的是作用于所有后代元素,通过空格来进行选择。
      
      话不多说,接下来通过代码给大家演示。
      

    二.举例

    <ul class="clothes">
            <li>衣服
                <ul>
                    <li>T恤</li>
                    <li>衬衣</li>
                    <li>短袖</li>
                </ul>
            </li>
            <br>
            <li>裤子
                <ul>
                    <li>牛仔裤</li>
                    <li>休闲裤</li>
                    <li>七分裤</li>
                </ul>
            </li>
        </ul>

    这是没有任何样式的,我们在浏览器中显示如下:
    这里写图片描述

    接下来我们使用子类选择器”.clothes>li”表示给class为clothes的子类li(第一代子类)添加一个红色边框。

        <script>
           $(function () {
              $(".clothes>li").css("border","1px solid red");
           });
        </script>

    浏览器显示效果如下图所示:
    这里写图片描述

    我们可以看到只有第一代子类为li(衣服、裤子)的加上了红色边框,而其他的如T恤、牛仔裤等等并没有任何样式。

    接下来我们换用后代选择器”.clothes li”表示给class为clothes所有后代为li的子类添加一个红色边框。

        <script>
            $(function () {
               $(".clothes li").css("border","1px solid red");
            });
        </script>

    浏览器显示效果如下图所示:
    这里写图片描述

    我们可以看到所有后代为li的元素都加上了红色边框,不仅仅是第一代子元素了。

    三.总结

    总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    展开全文
  • 名称 用法 描述 代选择器 ...使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。 案例: <!DOCTYPE html> <html lang="zh-CN"> <head&g...
    名称用法描述
    子代选择器$(“ul>li”)使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
    后代选择器$(“ul li”)使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

    跟CSS的选择器一模一样。

    案例:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="father">
      <div>11</div>
      <div>22
        <p>111</p>
        <p>222</p>
        <p>333</p>
      </div>
      <div>33</div>
      <div>44</div>
      <div>55</div>
      <p>66</p>
      <p>77</p>
      <p>88</p>
    </div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        //$("s1,s2")// 并集选择器
        //$("s1 s2")// 后代选择器
        //$("s1>s2")// 子代选择器
        
        //$("li.green")
        //$("s1s2") //交集选择器
        
        
        //$("#father>p").css("backgroundColor", "red");
        $("#father p").css("backgroundColor", "red");
      });
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 下面是一个css后代选择器的例子,大家参考使用吧
  • 后代,顾名思义,子孙后代,...1、首先是后代选择:.the-demoli 结果: 2、代选择:.the-demo>li 结果: 可以看到,孙辈的没有边框。代选择只能一层一层的往下,孙1的代选择:.the-demo>l...
  • CSS后代选择器和子代选择器

    千次阅读 2019-05-16 23:52:36
    CSS后代选择器和子代选择器 1.后代选择器 祖先元素和后代元素(相对的概念) 后代元素:被包含在祖先元素中的元素。 祖先元素:包含后代元素的元素。 后代选择器语法 选择器1 选择器2 选择器3{}选择器之间用...
  • 子选择器 还有一个比较有用的选择器子选择器,即大于符号(&gt;),用于选择指定标签元素的第一代元素。如右侧代码编辑器中的代码: .food&gt;li{border:1px solid red;} 这行代码会使class名为food下的...
  • 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的元素,请使用元素选择器 子选择器:即大于符号(&gt;),用于选择指定标签元素的第一代元素。  语法:h1 &gt; strong {color:red;...
  • jQ 元素选择器和后代选择器

    千次阅读 2017-09-30 13:47:19
    语法: $("patent > child") 选择只是儿子,不包括孙子 ...  eg: p id="n2" class="test"> span id="n3" class="a">Hellospan> div>span id="n7" class="a">Hello7span>div> p> var p_span = $("p > span")
  • html 后代选择器和子元素选择器

    千次阅读 2017-08-30 10:21:44
    后代选择器和子元素选择器    1.后代选择器和子元素选择器之间的区别?  1.1  后代选择器使用空格作为连接符号  子元素选择器使用>作为连接符号  1.2  后代选择器会选中指定标签中,所有的特定后代...
  • 后代选择器元素选择器的区别

    千次阅读 2018-08-27 15:25:24
    1.连接符号 1.后代选择器用空格作为连接符号 2.子元素选择器用&gt;作为连接符号 2.选中标签范围 1.后代选择器会选中指定标签中,...1.后代选择器和子元素标签都可以使用标签名称/id名称/类名称等作为选择...
  • 后代选择器和子代选择器的区别

    万次阅读 2017-09-05 13:57:31
    1.后代选择器: 写法:$("ancestor descendant") 例:$("div span") 指的是div标签下的所有span标签,不管是什么层级; 2.代选择器: 写法:$("parent > child") 例:$("div > span") 指的是div标签下的...
  • 下面本篇文章就来给大家对比一下子选择器和后代选择器,介绍子选择器和后代选择器之间的区别,希望对大家有所帮助。 选择器 选择器用于匹配指定元素的所有元素;它给出了两个元素之间的关系。该element > ...
  • 选择器和后代选择器

    万次阅读 2018-08-02 09:12:48
    在CSS3中,我们会遇到这个一个问题,当层级过多的时候,我们想对其中的某些标签进行操作,有时候我们又想只对某一层级的标签进行操作,这个时候就涉及到字标签和后代标签的问题 标签:必须是当前的标签的下一级...
  • $("s1,s2")并集选择器 $("s1 s2")后代选择器 $("s1>s2")代选择器 $("s1s2")交集选择器 转载于:https://www.cnblogs.com/cuilichao/p/9804355.html
  • 后代和子代选择器   CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题。 1、后代选择器 比如下面的例子,我们需要将所有的“Hello”选择出来,当然我们可以使用类...
  • 群组选择器、后代选择器代选择器的优先级 群组选择器 要对不同的HTML对象定义相同样式时,可以采用群组选择器。例如: 要对p1,p2同时设置相同的颜色。 .p1,.p2{color:#aaa;} 上述规则在选择器中指定了多个对象...
  • [css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别? 后代选择器与子选择的关系:后代选择器>子选择器。 后代选择器:包括父元素的子元素以及孙子元素(代表符号:空格) 子选择器:包括父元素的子元素...
  • CSS——后代选择器和子元素选择器区别

    千次阅读 多人点赞 2018-07-04 16:59:05
    记录一下后代选择器和子元素选择器区别,好吧,只是为了炫耀一下沈美人! CSS代码: 后代选择器:用于指定元素所有的后代元素 //选择div下所有的span元素,无论层级 div span { color: red; } 子元素选择器:...
  • 主要介绍了jQuery后代选择器用法,以设置文本颜色的实例分析了后代选择器的应用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,914
精华内容 21,565
关键字:

子选择器和后代选择器