精华内容
下载资源
问答
我要提问
  • 层级选择器
    2018-04-16 18:59:13
     <!DOCTYPE html>
     <html>
     <head>
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
     <script type="text/javascript">
     $(function(){
     //找到表单中所有的 input 元素
     var inputs = $("form input");
     inputs.css("color","red");
     //子选择器
     //var inputs = $("form>input");
     //一个有效选择器并且紧接着第一个选择器
     // var inputs = $("label+input");
     // inputs.css("color","red");
     //一个选择器，并且它作为第一个选择器的同辈
     // var inputs = $("form~input");
     // inputs.css("color","red");
      
     debugger;
      
     });
     </script>
     </head>
     <body>
     <form>
     <label>Name:</label>
     <input name="input1" />
     <fieldset>
     <label>Newsletter:</label>
     <input name="input2--newsletter" />
     </fieldset>
     </form>
     <input name="none111" />
     <input name="none222" />
     </body>
     </html>
     
    更多相关内容

  • CSS04：层级选择器

     2022-02-10 16:48:15
    后代选择器 在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你 举例：body 后的所有 p 元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

    后代选择器（空格）

            在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你

    举例：body 后的所有 p 元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 后代选择器 */
        body p {
            background: chartreuse;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

    子选择器（>）

            某个元素的下一级元素；比如爷爷的“子选择器”是爸爸

    举例：body 的下一级 p 元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 子选择器 */
        body > p {
            background: #ff008a;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

    相邻兄弟选择器（+）

            同级向下相邻的一个元素；比如你有一个哥哥和一个弟弟，那么你的“相邻兄弟选择器”是你的弟弟

    举例：p1 的相邻兄弟 p 元素，只有 p2 的样式会发生改变

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 相邻兄弟选择器，只有p2的样式会发生改变 */
        .active + p {
            background: gold;
        }
    </style>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

    通用兄弟选择器（~）

            当前元素的向下的所有兄弟元素；你的“通用兄弟选择器”是你的弟弟妹妹们

    举例：p2 的通用兄弟 p 元素，是 p2 后面的所有 p 元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 通用选择器 */
        .active ~ p {
            background: aqua;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

    收起
    展开全文
    linq html

  • 层级选择器（基础）+基本选择器

     千次阅读 2020-10-17 17:33:28
    ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素 语法：$("ancestor descendant") ancestor是祖辈或者父辈的标签或者属性，descendant是后代的标签或者属性

    文章目录


    ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
    parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
    prev + next 相邻元素选择器：匹配所有紧接在
    prev 元素后的 next 元素
    prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

    $(“ancestor descendant”)后代选择器

    ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
    语法：$("ancestor descendant")

    ancestor是祖辈或者父辈的标签或者属性，descendant是后代的标签或者属性在这里插入图片描述

    $(“父>子”)选择器

    语法：$("father>son")
    选择指定父元素的子元素
    跟后代选择器类似，不过这个只能用于父子之间，不能跨越父子关系
    在这里插入图片描述
    当然，这里，父子不仅可以为标签也可为属性，如#id，.class…

    $(“兄弟+兄弟”)选择器

    选择指定元素指定的且紧挨着的兄弟元素
    语法：$("兄+兄")
    在这里插入图片描述
    不能选到自己的后代，同时，指定的限制条件可以为属性

    $(“兄~兄”)选择器

    选择元素的所有指定兄弟元素
    语法：$("兄~兄")
    在这里插入图片描述
    可以用兄弟元素的属性，不一定非为标签，而且这个不用紧挨着

    基本选择器

    在这里插入图片描述
    #ID选择器：($("#id"))根据 id 查找标签对象

    .class选择器：($(".class"))根据 class 查找标签对象

    element选择器：($("element"))根据标签名查找标签对象 (element表示元素也就是标签)

    * 选择器：($("*"))表示任意的，所有的元素

    selector1，selector2组合选择器：将每种选择器匹配到的元素合并后一起返回，即返回一个包含所有dom对象的数组。(("element,#id,.class"))合并选择器 1(element选择器)和选择器 2(#id选择器)和(.class选择器) 的结果并返回


    还可$(选择器1选择器2...)来选择可以匹配这里面所有选择器的元素，选择器间紧挨着，当然如果其中选择器中有element则·其必须写在开头不然会出错，这一疙瘩的整个选择器也可放在组合选择器里面当做一个选择器来用

    收起
    展开全文
    jquery

  • jQuery 层级选择器（子代、后代选择器）

     千次阅读 2019-10-25 23:22:35
    子代选择器 $(“ul>li”) 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 跟CSS的选择器一模一样。...
    名称用法描述
    子代选择器$(“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>

    在这里插入图片描述

    收起
    展开全文

  • 40.2 jQuery 选择器（基本选择器、层级选择器、属性选择器、过滤选择器、表单选择器）

     2021-02-15 02:58:28
    2.2层级选择器练习 2.3属性选择器练习 2.4过滤选择器练习 2.5表单选择器练习 1 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 Query 选择器基于元素的 id、类、类型、属性、属性值等...
    收起

  • CSS选择器优先级及写法

     2019-05-19 15:38:02
    css的选择器有很多种，那么，自然而然的就会有优先级这一概念出现；下面就先来了解一下css的选择器有哪些： 1.标签选择器(如：body,div,p,ul,li) 2.类选择器(如：class=“head”,class=“head_logo”) 3.id选择器...
    收起
    css 优先级

  • day16 css3层级选择器 属性选择器 结构伪类 目标伪类 动态伪类

     2021-08-04 09:11:52
    层级选择器 1) 后代选择器 选择器 选择器{} 2) 子代选择器 选择器>选择器 只能选择孩子，不能选择到孙子及之后，但是要注意继承 3) 相邻的兄弟 选择器+选择器 只能选择到后面的相邻的一个兄弟 4) 相邻的兄弟们 选择...
    收起

  • 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

     2016-08-24 10:20:00
    前面的话 　选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM以及ajax操作都依赖于...jQuery选择器可以分为基础选择器、层级选择器、过滤选择器和表单选择器四类。对于每类选择器，除了给出jQuery选择器的写...
    收起

  • 17兄弟(层级)选择器 三角形的实现 盒子模型里面的两种模式

     2021-10-31 19:14:31
    一、兄弟选择器，层级选择器 e+f{} 选中e的后面相邻的兄弟f e~f{} 选中e的后面所有兄弟f e,f{} 选中e和f 二、三角形的实现 设置盒子宽高为0 width:0; height:0; 设置边框为粗度且为透明度 border:粗度 solid ...
    收起
    css css3 html

  • JavaWeb——JQuery之五种选择器的应用及实践案例总结（基本选择器、层级选择器、属性选择器、过滤选择器、...

     2020-08-11 20:22:27
    4 JQuery选择器 选择器，就是用来筛选具有相似特征的元素（标签）。 4.1 基本语法 1）事件绑定 2）入口函数 3）样式控制
    收起
    基本选择器 属性选择器 过滤选择器 表单过滤选择器

  • jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

     千次阅读 2018-07-16 20:24:04
    &lt;!...gt; &...层次选择器&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;script type="te
    收起

  • css2选择器写法大全

     2015-09-15 00:32:47
    css2选择器写法大全 你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握...
    收起

  • Css选择器-层次选择器（关系选择器）

     2020-06-28 16:25:47
    1. E F 匹配 E 元素下所有的子元素 F（后代选择器） eg: CSS .box a{ color: red; } 匹配 .box 下所有的子元素 a 2. E > F 匹配 E 元素下第一级子元素 F（子选择器） eg: CSS .box>a{ ...
    收起
    css css3 快速排序

  • 迈进前端(06) CSS 选择器之层级选择器

     2020-11-12 21:30:05
    本篇博客主要介绍的是 CSS 选择器中的第二个分类——层级选择器。本篇博客主要介绍 HTML 节点树的结构和 CSS 层级选择器的使用 HTML 结构树 CSS 层级选择器是根据 HTML 节点树之间的关系提供的选择器用法，所以说...
    收起
    css html javascript

  • 层次选择器（父子、后代、兄弟、相邻）

     千次阅读 2020-11-30 15:09:42
    选择器 说明 M N 后代选择器，选择M元素内部后代的N元素（所有N元素） M>N 子代选择器，选择M元素内部子代的N元素（所有第1级N元素） M~N 兄弟选择器，选择M元素后所有的统计N元素 M+N 相邻选择器，...
    收起
    css 前端

  • 纯原生Javascript实现的移动端多级选择器插件

     2021-06-13 14:29:27
    原生Javascript实现的移动端多级选择器，可通过配置实现多级联动。支持AMD模块化加载方式。压缩后JS文件只有4.07KB。先上插件github地址：效果图：常用的多级联动选择：普通日期选择：多行多选择器：使用：引入依赖...
    收起

  • CSS复合选择器

     2021-08-04 04:39:18
    交集选择器交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。比如： p.one 选择的是： 类名为 .one 的 段落标签。使用率相对较少记忆技巧：交集...
    收起

  • css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法

     千次阅读 2020-08-19 15:16:56
    前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>...
    收起

  • css3选择器--层次选择器

     千次阅读 2017-06-01 16:29:37
    1. 后代选择器： E F， 作用的是选择元素的后代元素。包括子元素、孙辈元素等。（常用） div div{ color：red； } 2.子选择器： E > F，作用的是某元素的所有子元素，不能包括孙辈元素（常用） body > div{ ...
    收起

  • 详解JQuery框架的五大选择器

     2021-05-19 10:49:15
    摘要：今天来和大家分享一下JQuery的五种选择器的详细使用方法。
    收起
    jquery 关系选择器 属性选择器 过滤器

  • jQuery选择器之层次选择器用法实例分析

     2021-06-12 05:40:04
    本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考，具体如下：前面一篇介绍了几种基本的jQuery选择器，今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、...
    收起

  • 前端css class嵌套/选择器总结(目的:识别less文件中嵌套的写法)

     2022-04-05 12:19:00
    文章目录1 问题2 css基础整理3 class与标签的混合4 注意事项5 摆脱css被覆盖的两小技巧目标元素可加class目标元素不可加class6 less文件写法的规则 1 问题 写前端代码，css调半天，最后还被前端无情地推倒重写，...
    收起
    css less html 前端

  • jQuery选择器大全

     2021-04-17 04:05:07
    JQuery的选择器页面的任何操作都需要节点的支撑，开发者如何快速高效的...jQuery几乎支持主流的css1~css3选择器的写法，我们从最简单的也是最常用的开始学起1、id选择器：一个用来查找的ID，即元素的id属性$( "#id" ...
    收起

  • ul li a span 这种选择器的写法有什么问题？

     2021-06-26 02:07:03
    如果说直接使用标签选择器不好，那么改成这样呢：ul.test li a span关于选择器的层级问题，我不理解为什么超过三级会不好？补充：我作了个测试：你们好//选择器性能测试function test(fn){var start=+new Date(...
    收起

  • JQuery 选择器使用详解

     2021-11-05 21:24:22
    层级选择器3. 属性选择器4. 基本过滤器5. 内容过滤器6. 表单过滤器:7. 表单对象属性过滤器8. jQuery 元素筛选 选择器：筛选具有相似特征的元素(标签) 1. 基本选择器 1. 标签选择器（元素选择器） 语法： $("html...
    收起
    jquery

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,964
精华内容 5,585
热门标签
关键字：

层级选择器写法