js 后代子代选择器_js 后代选择器_js后代选择器 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

名称用法描述子代选择器 $(“ul>li”) 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素后代选择器 $(“ul li”) 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等...跟CSS的选择器一模一样。...div>44 55 66 77 88 $(function () { //$("s1,s2")// 并集选择器 //$("s1 s2")// 后代选择器 //$...("s1>s2")// 子代选择器 //$("li.green") //$("s1s2") //交集选择器 //$("#father>p").css

1.1K6 0

css后代选择器_什么是后代选择器并举例说明

后代选择器集中形式： 1.父代 * {}从父代中的找到所有子代。 2.父代子代1{} 是从父代中找到子代1 或者父代子代2{} 是从父代中找到子代2 。...3.父代子代1 子代2{} 这个是从父代中找到子代1，再从子代1 找到子代2. 第一种形式：虽然是全部选中但是*的优先级较低。 <!...20px; background: rgba(255,0,0,0.2); //这是给它一个红色，透明度为0.2 } .a *{ border: 2px solid black; //这里是选中类a的所有后代...20px; background: rgba(255,0,0,0.2); } .a .b{ border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代

3486 0

您找到你想要的搜索结果了吗？

是的

没有找到

【说站】css后代选择器的介绍

css后代选择器的介绍说明 1、后代选择器又称为包含选择器，可以选择作为某元素后代的元素。 2、从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代。...即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。... c的子代 c的后代 ... c的兄弟以上就是css后代选择器的介绍，希望对大家有所帮助。

3584 0

【说站】css后代选择器的使用

css后代选择器的使用说明 1、后代选择器必须用空格隔开。 2、后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代。...3、后代选择器不仅仅可以使用标签名称，还可以使用其它选择器。后代选择器可以通过空格一直延续下去。...作用：找到指定标签的所有特定的后代标签, 设置属性格式：标签名称1 标签名称2{ 属性:值; } 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"...标签名称2"的标签, 然后在设置属性以上就是css后代选择器的使用，希望对大家有所帮助。

6022 0

【CSS】CSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )

文章目录一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...选择器 ; 复合选择器 可以更精准更快速地选择目标元素标签 ; 二、后代选择器 ---- 1、语法说明后代选择器 可用于选择基础选择器选择出的元素组中的另外基础选择器选择出的元素组...; 后代选择器 语法 : 父选择器 和子选择器 都是 CSS 基础选择器 , 父选择器 和子选择器 之间使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2...; 属性名称3:属性值3; } 2、示例分析下面的代码中 , 选择 div 下的 label 标签 , 就可以使用后代选择器 ; 内部文本...则可以使用如下样式 : .father label { color: blue; } 下面的代码中 , 选择 div 下的 div 下的 label 标签 , 就可以使用后代选择器

1.9K1 0

【说站】css后代选择器和子元素选择器的区别

css后代选择器和子元素选择器的区别说明 1、后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。 2、后代选择器选中所有的特定后代标签，子元素选择器选中所有的特定的直接标签。...后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签...单纯用后代选择器很难做到吧！...这时候子代选择器就出场了,可以这样写: div > ul > li{ 注：>是指只能一代接一代，比如：div > ul > li } 如果想选择div中所有li... 以上就是css后代选择器和子元素选择器的区别

1.7K3 0

网页|Zepto框架层次选择器

/zepto.min.js"> //后代选择器 空格 $("#parent #child").css("background-color...后代选择器选择的是元素的后代。...在这里可以看出后代选择器顾名思义，只要是后代都可以选择。 2）子选择器 <!...子选择器选择的是元素的子代。...在这里可以看出子代选择器顾名思义，只能干涉子元素而对子元素以外的后代元素确实无能为力了。 3）相邻元素选择器 <!

8131 0

【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )

文章目录一、并集选择器 1、语法说明 2、代码示例二、并集选择器与后代选择器示例 1、添加注释 2、HTML 结构 3、后代选择器 1 4、后代选择器 2 5、并集选择器 6、完整代码示例 7...DOCTYPE html> 并集选择器和后代选择器...登录设置为红色 */ .site-r login { color: red; } 4、后代选择器 2 将主导航栏中的链接设置为蓝色 ; 并集选择器和后代选择器...后代选择器 登录设置为红色 */ .login a { color: red; } /*2.

1.2K1 0

前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

派生选择器用的很多，派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器，我们来理解一下他们之间的具体用法与区别。...1、css后代选择器 语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，...为后代选择器。...即，无论你在哪里，我都要选中你，因为你是我的后代。...3、相邻兄弟选择器 语法：h1 + p {margin-top:50px;} 表示是“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”这是官方的说法，理解的误区在于这个加号，h1

9404 0

一、前端基础-css-css的选择器之组合选择器.

-- 组合选择器 1、多元素选择器：匹配元素A或元素B，A和B之前用逗号分隔。 2、后代元素选择器：匹配所有属于A元素后代的B元素，A和B用空格分隔。...--> 组合选择器之后代选择器 组合选择器之后代选择器 组合选择器之后代选择器...-- 子代元素选择器 1、在head中添加样式（演示方便，可以使用link） 2、匹配是所有A元素的子元素B，其他不受影响。...4、子代元素选择器不可以递归匹配多层，只匹配第二层。...--> 组合选择器之子代选择器 组合选择器之子代选择器 <!

7431 0

jQuery基础--总结

"> //jquery:简单、粗暴 //jq和js的关系 //js是什么？...js是一门编程语言 //jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。 //概念 //1. 为什么要学jquery ？...js库，说白了就是js文件，里面有一大堆的方法 //3. 使用jquery的步骤： 1. 引入jquery文件 2. 入口函数功能实现 //4....//基本选择器 标签类 id选择器交集并集 //层级选择器：子代后代 //过滤选择器： //:odd:奇数 even:偶数 :eq：指定下标 //...:first :last :gt :lt //筛选选择器 //children():找儿子 //find():找后代 //parent():找爹 //siblings():找兄弟

6832 0

CSS 1.0~3.0选择器（上）

通常设置id，往往与JS相关~ 兼容性 IE6+、Firefox、Chrome、Safari、Opera 标签名选择器 基本语法 X div { width: 960px; margin: auto;...此时后代选择符派上用场。...兼容性 IE7+、Firefox、Chrome、Safari、Opera 子代选择器 基本语法 X > Y #h5course > p { color: red; } HTML5学堂的一些提醒： X Y...和X > Y之间的不同点是后者只选择直接子代。...选择符#h5course > p将只选择id为h5course的元素的直接子代p。它不匹配更深层的p元素。

8005 0

5.CSS层次选择器-CSS进阶

CSS层次选择器 选择器 说明 M N 后代选择器，选择M元素内部后代N元素（所有的N元素） M>N 子代选择器，选择M元素内部子代N元素（所有第1级N元素） M~N 兄弟选择器，选择M元素后所有的同级...M N 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素） 1.后代选择器 后代选择器：选中元素内部中所有的指定的某个元素，包括子元素和其它后代元素。...-- #first p:会选中id为first元素的所有后代p元素。 --> ? 后代选择器示例11.png 2.子代选择器 子代选择器：选中元素内部的某一个子元素，只限子元素。...（2）子代选择器与后代选择器区别后代选择器，选取的是元素内部所有的元素，包括子元素。子代选择器，选取的是元素内部某一个元素，只限子元素。（3）示例 ① 例1 <!...子代选择器示例1.png 3.兄弟选择器 兄弟选择器：选中元素后面（不包括前面）的某一类兄弟元素（同级）。

1.4K4 1

前端基础-jQuery选择器

语法模板： 00-语法模板.html（需要包含jquery.js） //常用选择器 //根据id获取元素获取到的结果：类数组对象...（重点）名称用法描述子代选择器 $(‘ul > li’); 使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素后代选择器 $(‘ul li’); 使用空格，代表后代选择器，获取ul下的所有...’); 相当于$(‘ul li’),后代选择器 siblings(selector) $(’#first’).siblings(‘li’); 查找兄弟节点，不包括自己本身。...prev() $(‘li’).prev() 找上一次兄弟 closest $(‘li’).closest(‘ul’) 找最近一个祖先元素语法模板： 00-语法模板.html（需要包含jquery.js...children() ); //获取 hobby 最近的祖先元素 console.log( $('#hobby').closest('form') ); //获取 hobby 所有后代元素

7931 0

jquery高级选择器第一部分

上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!...慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接下来开始介绍jq的高级选择器第一部分!...后代选择器 $('p span').css('color','red'); //后代选择器,选取p的后代span,span的后面也会继承字体红色子代选择器 $('div>p').css('color'...,'orange');//子代选择器,只选择目标元素的子代(强制必须的子代,子代之后不会被选取) 选取目标元素的下一个同级元素(单一兄弟元素选取) // $('.ha + p').css('color'...,'pink');//同级下个元素选择器 选择class为ha的下一个p元素选取目标元素后面的所有同级元素 $('.one~p').css('color','yellow');//同级元素标签选择class

3712 0

关于其他选择器以及选择器优先级详解

分析：选中类名为wrap里面的所有的标签（只要是它的后代都能被选中），并对其设置相应的样式；子代选择器 基本语法：选择器 > 选择器 { }，多个选择器用 > 连接。...分析：选中类名为wrap的所有子代，因为“我在第三个标签里面”该标签不是它的子代，所以没有出现边框的样式；子代和后代选择器的区别子代和后代的区别在于，后代选择器，只要都是父级的后代...而子代只是父子关系才会被选中。.../* 后代选择器 */ .wrap .box { width: 300px; border: 1px solid #000; background: #cfc; } /* 子代选择器...分析：代码23行的标签不是类名为outer标签的子代，而是属于后代，所以.outer > .box没有被选中该标签；伪类选择器 基本语法：选择器：hover { }。

9568 0

【领会要领】web前端-轻量级框架应用（jQuery基础）

jQuery框架，简介，优势，安装，语法，jQuery选择器，id选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，jQuery的dom.../js/jquery-xx.js"> $(document).ready(function(){..."div:first") 匹配所有div中第一个div元素后代选择器 $("ancestor descendant") 匹配给定的祖先元素的所有后代元素 $("#ul li") 匹配 id 为null...的所有li元素子代选择器 $("parent>child") 匹配所有指定"parent"元素中指定"child"的直接子元素 $("#标签id值") // 原生 var div = document.getElementById...$("#test li").css("border", "2px solid red"); 子代选择器 $("选择器1>选择器2>...")

2.1K2 0

第70天：jQuery基本选择器（一）

1、CSS选择器 CSS选择器回顾符号说明用法 #id Id选择器 #id{ color:red; } .class 类选择器....class{ //} Element 标签选择器 P { //} * 通配符选择器 配合其他选择器来使用 , 并集选择器 div...,p{} 空格后代选择器 div span{} 选择div下面所有后代的span > 子代选择器 div > span{} + 紧邻选择器... 层级选择器 符号说明用法空格后代选择器 选择所有的后代元素 $(“div span”). css(“background”,”red”);...> 子代选择器 选择所有的子代元素 $(“div > span”). css(“background”,”red”) + 紧邻选择器 选择紧挨着的下一个元素

4271 0

css基础选择器有哪些

css基础选择器有哪些（熟记）一、选择器作用：规范了页面中哪些元素能够定义好样式，同时也能帮助我们去二、选择器分类 1. 通用选择器（只能放在样式表） 1....- %） 5.特殊用法-分类选择器 1、作用：将元素选择器和类选择器结合在一起，从而实现对某种元素的不同样式的细分控制 2、语法：元素选择器.类选择器{ 样式声明； } 6.特殊引用...群组选择器 1、选择器声明以逗号隔开的选择器列表，其目的是为了声明一组选择器的公共样式 2、语法： 选择器1,选择器2,选择器3,选择器4,{ 样式声明； } 6....后代选择器 作用：用于匹配某元素的后代元素的样式后代：一级或者多余一级的父子（层级）关系注意：后代选择器之间用空格隔开 2. 语法： 选择器1 选择器2{ 样式声明； } 7....子代选择器 1、作用：用于匹配某元素的子代元素，能够实现更精准的元素定位 2、语法： 选择器1>选择器2{ 样式声明； } 3、注意：子代选择器之间用大于号隔开 8.

4994 0

JQuery选择器(上)

HTML5学堂：jQuery的选择器可以让我们很方便的操作获取元素，那么本文介绍的是jQuery选择器的几种选择器，希望对大家有帮助！谢谢！...1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test...,如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ......")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签) 可以见DEMO。...4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test") <p class="test

1.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭