大家好，又见面了，我是你们的朋友全栈君。 1.CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。...建议使用:root方法。 3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。...就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： input:not([type="submit"]){ border:1px solid...6.CSS3 结构性伪类选择器—first-child :first-child选择器表示的是选择父元素的第一个子元素的元素E。...简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
在css中，选择器可以获取元素，为其添加css样式；但zepto框架与css选择器相比，它更加强大，因为zepto选择器为元素添加的是行为，行为的添加使得页面的交互更加丰富多彩。...这里我们选择了id为parent的元素里的所有id为child（后代）元素背景色变为pink的同时，又选择了id为parent的元素里的所有p（后代）元素字体颜色变为yellow。...同辈元素选择器选择的是元素之后的同辈元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到除p1外的所有p元素背景都变成了变成了pink。...在这里可以看出同辈元素选择器的选择顾名思义，其选择的元素是元素之后所有同辈的元素。 3.总结 zepto框架有四大常用选择器，基本选择器、层次选择器、属性选择器和基本过滤选择器。...在这里笔者只介绍了其中的一种，但也可以看出层次选择器十分有趣，同时相较于CSS层次选择器来说，它通过元素之间的层次关系来获取元素的方法也更加实用。
")选取所有 和 class 为 item 的 标签的元素 层次选择器，适合于通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素，总结如下：...选择器 返回 示例 后代元素选择器 集合元素 $("div span") 选取 里的所有的 元素 子元素选择器 集合元素 $("div>span") 选取 元素下元素名是...选取 ID 为 item 的元素后面的所有 兄弟元素 过滤选择器，主要是通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个冒号:开头...") 选取所有不可见元素 常用方法 CSS 样式 $("#id").css(‘backgroundColor’, 'blue’); CSS 样式 .css({‘color’:'red’, 'width...之后的第一个兄弟元素 .next();· 之后的所有兄弟元素 .nextAll(); 之前的第一个兄弟元素 .prev(); 之后的所有兄弟元素 .prevAll(); 除本身以外的所有兄弟元素 .siblings
Element.querySelector() https://developer.mozilla.org/zh-CN/docs/Web/API/Element/querySelector 返回与指定的选择器组匹配的元素的后代的第一个元素...选择器字符串( selectors ) 参数 selectors一组用来匹配ElementbaseElement后代元素的选择器selectors；必须是合法的css选择器，否则会引起语法错误。...返回匹配指定选择器的第一个元素。 返回值 基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。...匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。...然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被querySelector()方法返回。 如果没有找到匹配项，返回值为null。
CSS基础选择器 标签选择器 就是用标签名来当做选择器。 1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2） 不管这个标签藏的多深，都能够被选择上。...选择的是所有.div1“中的”p，就是后代p。 空格可以多次出现。...1 .div1 .li2 p{ 2 color:red; 3 } 就是.div1里面的后代.li2里面的p。 后代选择器，就是一种平衡：共性、特性的平衡。...当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。 后代选择器，描述的是祖先结构。...h3元素后面紧挨着的第一个兄弟。
外部样式表 将 CSS 保存在一个独立的扩展名为 .css 的文件中，并在 HTML 的 里使用 元素中引用它，这种方法可以说是最好的，因为你可以使用一个样式表来设置多个文档的样式...后代选择器 结构： 多个选择器之间通过空格分隔开的话表示这是一个后代选择器，也就是说，需要先满足第一个选择器的前提下，在第一个选择器匹配到的元素的后代元素中去匹配第二个选择器...表示的是满足第一个选择器的前提下，从它匹配到的元素后，去寻找位于同一层级，且在该元素后面的所有满足第二个选择器的元素。...兄弟选择器只匹配相邻的一个元素，而普通兄弟选择器则是可以匹配位于元素后面的所有符合第二个选择器的元素。...在 CSS 中也是可以使用一些内置的方法功能。 伪类选择器 当不是通过 HTML 文档中元素的一些基本性质，比如 id，class，标签名，属性这些基本特征来匹配这些元素时，就可以称作伪类选择器。
#id 选择器 .class 选择器 :type 类型选择器 ("*")选取所有元素在线实例(":button")选取所有 type="button" 的 元素 和 ...") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id + .classname ") //紧邻下一个元素选择器 $("#id ~ .classname...") //兄弟元素选择器 3.过滤选择器(重点) $("li:first") //第一个li $("li:last") //最后一个li $("li:even") //挑选下标为偶数的...li $("li:lt(2)") //下标小于 2 的li $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li 3.2内容过滤选择器 $("div:contains...树 children() - 所有直接子元素 find() - 被选元素的所有后代元素，div下所有span：$("div").find("span"); 在 DOM 树中水平遍历 有许多有用的方法让我们在
阅读目录 一 基本选择器 二 后代选择器、子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器...>我是标题 我是段落 我是超链接 二 后代选择器、子元素选择器 1、后代选择器 #1、作用：找到指定标签的所有后代...div标签的所有后代标签，标签名为">p" 2、子元素选择器只会查找儿子，不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class 4、子元素选择器可以通过...2 后代选择器vs子元素选择器 三 兄弟选择器 1、相邻兄弟选择器，CSS2推出 #1、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性 #2、格式 选择器...无论有没有被隔开，都可以被选中 <!
在 jQuery 中就只有一种方式：$("选择器") 1、id 选择器 语法： $("#id选择器的值") $(function () {// 页面加载 $("#btn").click(function...小总结：jQuery中的一些方法 val(); // 获取或设置表单标签中的 value 值。 css(); // 设置元素的 css 样式属性值。...中的 display:none|block 对应的隐藏和显示在 jQuery 中可以使用方法：show() 和 hide(); 3、show 和 hide 方法中可以添加参数，数字表示毫秒。...prevAll() $("li").prevAll("li"); 查找上面所有的兄弟节点 siblings(选择器) $("#first").siblings("li"); 查找除自身之外的所有兄弟节点...当 next， prev 系列的方法，如果没写参数，则查找所有的兄弟节点；如果有参数，则查找所有兄弟节点中的指定元素。
涵盖内容 1.熟悉css基本语法，以及css工作原理 2.熟练使用css selector 常规选择器class，id,元素，后代，通用，了解选择器的优先级 3.熟悉浮动，定位，盒模型，背景，字体，...和 transform transform: translate(-50%, -50%); 组合选择符 后代选择器 后代选择器用于选取某元素的后代元素。...以下实例选取所有元素插入到 元素中: div p { background-color:yellow; } 子元素选择器 与后代选择器相比，子元素选择器（Child selectors...紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。...以下实例选取了所有位于 元素后的第一个 元素: div+p { background-color:yellow; } 后续兄弟选择器 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
其扩展名为.css。CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对各网页元素进行格式化。...ID选择器 ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。...然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。 语法：以”#”开头 使用方法： <!...如：h1,h2,ul,li{margin:0;padding:0;} 定义的方法：选择器之间用逗号隔开 后代选择器 后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，...子元素选择器 请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。
2.1.1 基础选择器 名称 用法 描述 ID选择器 $(’#id’) 获取指定ID的元素 全选选择器 $(’*"’) 匹配所有元素 类选择器 $(".class") 获取同一类class的元素 标签选择器...$(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器 $s(“Ii.current”) 交集元素 2.1.2 层级选择器 名称 用法 描述 子代选择器...$(“ul>li”); 使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 2.1.3...筛选选择器 名称 用法 描述 :first $(‘li:first’) 获取第一个li元素 :last $(‘li:last’) 获取最后一个li元素 :eq(index) $(“li:eq(2)”)...:odd $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素 :even $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素 2.1.4 其他选择器 语法 用法 说明
一、基本选择器 基本选择器参考传送门：http://www.w3cplus.com/css3/basic-selectors 1、通配符选择器(*) 通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素...;color: lime;} 5、后代选择器（E F） 后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代...CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有...3、CSS3的：nth选择器 这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法： 1):fist-child...} “:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。
2.百度百科看CSS选择器 要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。...（ID是唯一的） eg.设置id为demoDiv的div块颜色 #demoDiv{ color:#FF0000; } # 4.后代选择器：又称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面...eg.设置id为links的后代中标签a为红色 #links a { color:red; } # 5.子选择器：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个...eg.设置id为links的后代中第一个a标签为蓝色 #links > a { color:blue; } 当然还有很多css选择器，比如伪类选择器、通用选择器、群组选择器等，我就不赘述了，大家要用百度谷歌...F12分析文章类别CSS选择器 从上面可以看出文章类型分为两部分：前面+后面，前面类型(实践项目)：在class为entry-meta-hide-on-mobile的p标签的后代中的第一个a标签中，后面类型
:first”) 在这里转一篇《jQuery选择元素的方法大全》 1....可以这样理解，页面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一个li元素，每个子类集合都要进行判断，直到找出所有符合要求的li元素； :last-child：这个也与上面相对了，...利用css选择器进行选择： 元素标签名：比如说(”a“)会选出所有链接元素； #id：通过元素id进行选择，比如说(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择...通过子选择器，容器选择器和属性选择器进行选择： *：匹配所有的元素，比如说:(*)会把页面中的所有元素都返回； E：匹配标签名为E的所有元素，如(“a”)返回所有链接元素； E F：匹配父元素E下的标签名为...F：匹配前面是任何兄弟节点E的所有元素F(E,F不必紧挨着); E:has(F)：匹配标签名为E，至少有一个标签名为F的后代节点的所有元素E； E.C：匹配带有类名C的所有元素E。.
4、所有的 XHTML 元素必须被嵌套于 根元素中 三、css选择器 1、CSS 元素选择器 html {color:black;} h1 {color:blue;} h2 {color...class选择器 还有一种CSS 多类选择器 This paragraph is a very important warning....6、CSS 后代选择器 h1 em {color:red;} 7、CSS 子元素选择器 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。...{font-weight: bold;} （4） first-of-type css选择器中:first-child与:first-of-type的区别 p:first-child 匹配p元素父元素的第一个子元素...解读：伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。
JQuery 干货篇之选择元素 1.1. 实验的HTML+CSS的代码 1.2. 选择器 1.3. JQuery对象的方法 1.4....red") 选择第一个img元素 JQuery对象的方法 context 选择元素时使用的上下文对象 $("img:odd").context.TagName; each(function...return false; }).css("background-color","yellow"); has 选择拥有指定后代的选择器 实例： $("div.dcell").has("img[...是用来得到结果集中的所有的后代元素，这里是后代元素，并不是只有子元素，还包括孙子。。。...); //这里选择了结果集中的第一个元素应用了样式 closest 得到结果集中元素的祖先元素中匹配selector选择器最接近的那个祖先元素，形式为closest(selector),closest
前言 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。...jQuery 选择器 jQuery 中所有选择器都以美元符号开头：$() 常用的一些选择器总结 语法 描述 $(this) 选取当前 HTML 元素 $("*") 选取所有元素 $("p") 匹配 <...$('#demo p') 后代选择器,通过父元素找子孙元素 $('#p1+div') 兄弟相邻选择器,通过定位当前元素，找到同一层级的下一个兄弟元素 $('#p1~div') 同辈选择器，,通过定位当前元素...，找到同一层级的该元素后面的全部兄弟元素 $('p, div') p标签和div标签元素 基础选择器 jQuery 查找元素语法，主要是基于css 选择器 根据标签匹配，不用加符号，直接是标签名称，如...// 后代选择器 var a1 = $('#demo p'); // id为demo的后代p元素 （包含子元素和子孙元素） console.log(a1) 兄弟相邻选择器
它基于已经存在的 CSS 选择器（ https://www.runoob.com/cssref/css-selectors.html ） 除此之外，它还有一些自定义的选择器。...:nth-of-type()选择同父代的第n个子代元素。 :only-child选择只有一个子代的元素。 :only-of-type()选择所有没有同名元素的兄弟元素。...HTML 元素包裹起来 $.escapeSelector() 转义CSS选择器中有特殊意义的字符或字符串 $.cssHooks 提供了一种方法通过定义函数来获取和设置特定的CSS值 jQuery —...> jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。...jQuery css() – 返回 CSS 属性 返回第一个匹配元素的css属性值 jQuery css() – 设置 CSS 属性 设置 所有配置元素指定的 CSS 属性 jQuery css(
,p{} 空格 后代选择器 div span{} 选择div下面所有后代的span > 子代选择器 div > span{} + 紧邻选择器...说明 用法 空格 后代选择器 选择所有的后代元素 $(“div span”). css(“background”,”red”); > 子代选择器...选择第一个匹配的元素。...选择所有序号为偶数的元素 $(“li:even”). css(“background”,”red”) :first 选择匹配第一个元素 $(“li:first”). css(...”,”red”) $(“a[href*=’i’]”) 选择所有包含i这个字符的元素，可以是中英文 $(“a[href*=’i’]”). css(“background”,”red”
领取专属 10元无门槛券
手把手带您无忧上云
