名称 用法 描述 子代选择器 $(“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.父代 * {}从 父代 中的找到 所有子代。 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 的后代
css后代选择器的使用 说明 1、后代选择器必须用空格隔开。 2、后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代。...3、后代选择器不仅仅可以使用标签名称，还可以使用其它选择器。 后代选择器可以通过空格一直延续下去。...作用： 找到指定标签的所有特定的后代标签, 设置属性 格式： 标签名称1 标签名称2{ 属性:值; } 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"...标签名称2"的标签, 然后在设置属性 以上就是css后代选择器的使用，希望对大家有所帮助。
css后代选择器的介绍 说明 1、后代选择器又称为包含选择器，可以选择作为某元素后代的元素。 2、从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代。...即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。... c的子代 c的后代 ... c的兄弟 以上就是css后代选择器的介绍，希望对大家有所帮助。
文章目录 一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例 一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...选择器 ; 复合选择器 可以 更精准 更快速 地 选择 目标元素标签 ; 二、后代选择器 ---- 1、语法说明 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组...; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2...; 属性名称3:属性值3; } 2、示例分析 下面的代码中 , 选择 div 下的 label 标签 , 就可以使用后代选择器 ; 内部文本...则可以使用如下样式 : .father label { color: blue; } 下面的代码中 , 选择 div 下的 div 下的 label 标签 , 就可以使用后代选择器
css后代选择器和子元素选择器的区别 说明 1、后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。 2、后代选择器选中所有的特定后代标签，子元素选择器选中所有的特定的直接标签。...后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签...单纯用后代选择器很难做到吧！...这时候子代选择器就出场了,可以这样写: div > ul > li{ 注：>是指只能一代接一代，比如：div > ul > li } 如果想选择div中所有li... 以上就是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.
/zepto.min.js"> //后代选择器 空格 $("#parent #child").css("background-color...后代选择器选择的是元素的后代。...在这里可以看出后代选择器顾名思义，只要是后代都可以选择。 2）子选择器 <!...子选择器选择的是元素的子代。...在这里可以看出子代选择器顾名思义，只能干涉子元素而对子元素以外的后代元素确实无能为力了。 3）相邻元素选择器 <!
-- 组合选择器 1、多元素选择器：匹配元素A或元素B，A和B之前用逗号分隔。 2、后代元素选择器：匹配所有属于A元素后代的B元素，A和B用空格分隔。...--> 组合选择器之后代选择器 组合选择器之后代选择器 组合选择器之后代选择器...-- 子代元素选择器 1、在head中添加样式（演示方便，可以使用link） 2、匹配是所有A元素的子元素B，其他不受影响。...4、子代元素选择器不可以递归匹配多层，只匹配第二层。...--> 组合选择器之子代选择器 组合选择器之子代选择器 <!
，复合要求的后代元素。...语法：祖先选择器 后代选择器 { } （先写祖先，再写后代） 选择器之间，用空格隔开 举例： /* 选中ul中的所有li */ ul li { color...，最终选择的是后代，不选中祖先。...子代选择器 子代选择器只能选择直接子代，即第一层子元素，不能选择更深层的子代。 作用：选中指定元素中，复合要求的子元素（儿子元素）。...} /* 类名为persons的元素中的子代a元素 */ .persons>a { color: red; } 子代选择器，最终选择的是子代
通常设置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元素。
"> //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():找兄弟
派生选择器用的很多，派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器，我们来理解一下他们之间的具体用法与区别。...1、css后代选择器 语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，...为后代选择器。...即，无论你在哪里，我都要选中你，因为你是我的后代。...3、相邻兄弟选择器 语法：h1 + p {margin-top:50px;} 表示是“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”这是官方的说法，理解的误区在于这个加号，h1
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.兄弟选择器 兄弟选择器：选中元素后面（不包括前面）的某一类兄弟元素（同级）。
语法模板： 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 所有后代元素
分析：选中类名为wrap里面的所有的标签（只要是它的后代都能被选中），并对其设置相应的样式； 子代选择器 基本语法：选择器 > 选择器 { }，多个选择器用 > 连接。...分析：选中类名为wrap的所有子代，因为“我在第三个标签里面”该标签不是它的子代，所以没有出现边框的样式； 子代和后代选择器的区别 子代和后代的区别在于，后代选择器，只要都是父级的后代...而子代只是父子关系才会被选中。.../* 后代选择器 */ .wrap .box { width: 300px; border: 1px solid #000; background: #cfc; } /* 子代选择器...分析：代码23行的标签不是类名为outer标签的子代，而是属于后代，所以.outer > .box没有被选中该标签； 伪类选择器 基本语法：选择器：hover { }。
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>...")
上一篇简单的介绍了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
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”) + 紧邻选择器 选择紧挨着的下一个元素
css基础选择器有哪些（熟记） 一、选择器作用：规范了页面中哪些元素能够定义好样式，同时也能帮助我们去 二、选择器分类 1. 通用选择器（只能放在样式表） 1....- %） 5.特殊用法-分类选择器 1、作用：将元素选择器和类选择器结合在一起，从而实现对某种元素的不同样式的细分控制 2、语法： 元素选择器.类选择器{ 样式声明； } 6.特殊引用...群组选择器 1、选择器声明以逗号隔开的选择器列表，其目的是为了声明一组选择器的公共样式 2、语法： 选择器1,选择器2,选择器3,选择器4,{ 样式声明； } 6....后代选择器 作用：用于匹配某元素的后代元素的样式 后代：一级或者多余一级的父子（层级）关系 注意：后代选择器之间用空格隔开 2. 语法： 选择器1 选择器2{ 样式声明； } 7....子代选择器 1、作用：用于匹配某元素的子代元素，能够实现更精准的元素定位 2、语法： 选择器1>选择器2{ 样式声明； } 3、注意：子代选择器之间用大于号隔开 8.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
