在学习后代选择符之前，首先要了解一下组成一个网页的HTML家谱，每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签（标签），相当于所有其他标签的始祖。...先看看一段HTML代码： Document Header A paragraph of importanttext. 以下是结构示意图 祖辈：外层HTML标签是内层标签的祖辈。...同辈：父辈相同的标签叫同辈标签，相当于兄弟姐妹。如和是同辈标签，和 也是同辈标签。...后代选择符可以由2个以上元素组成，例如： ul li a body li a html li a html body ul li a 以上四个选择符的作用相同，因此表明，无需指明目标标签的所有直系。...同样的，后代选择符也不局限于只能使用类型选择符。 可以使用不同类型的选择符构建复杂的后代选择符。
类选择符 HTML代码： CSS代码： div { width: 200px; height: 200px; border: 1px solid #000; margin: 20px; } .one{...首先给选择符起一个名字，然后把这个名字指定给想装饰的HTML标签。例如上一个例子中，我就给第一个div命名为“one”。 类选择符还能精确控制某个元素的外观，而不管元素使用的是哪个标签。...这样Web浏览器才能在样式表中找到类选择符。 类选择符的名称中只能包含字母、数字、连字符和下划线。 选择符的名称必须以字母开头。 类选择符区分大小写。 在HTML中，标签设置class属性。 。...ID选择符 CSS使用ID选择符选取网页中的特定部分，例如横幅、导航栏或者主内容区域。 在HTML中设置ID的方法与设置类的方法差不多，不过使用的属性不同。...正确地使用ID HTML的id属性有些作用是class属性实现不了的。这些优势与CSS没关系，因此完全可以不适用ID选择符。
什么是组合选择符？ 组合选择符说明了两个选择器直接的关系。 CSS组合选择符有几种，都是什么？
对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5。...选择符 API ---- Selectors API 是由 W3C 发起制定的一个标准，致力于让浏览器原生支持 CSS 查询。...这个方法接收一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true，否则，返回 false: if (document.body.matchesSelector("body.page1...firstElementChild: 指向第一个子元素，firstChild 的元素版 lastElementChild: 指向最后一个子元素，lastChild 的元素版 previousElementSibling: 指向前一个同辈元素...，previousSibling 的元素版 nextElementSibling: 指向后一个同辈元素，nextSibling 的元素版 var child = element.firstElementChild
属性选择符的使用 由 Ghostzhang 发表于 2006-04-17 16:15 在CSS的选择符中，除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID...)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”，试了一下属性选择符，感觉很不错，如果使用到页面中的话...，会让CSS的定义更加的强大，可惜现在IE并不支持这一选择符。...属性选择符可分为下面几种： Attribute Selectors E[attr] 属性选择符。 选择具有attr属性的E。...Attribute Selectors E[attr=value] 属性选择符。 选择具有attr属性且属性值等于value的E。
属性选择符的优先级 由 Ghostzhang 发表于 2006-04-24 10:59 大家都知道样式定义存在优先级的问题，像“ID选择符”的优先级就比“样式选择符”要高等等。...在写完《属性选择符的使用》和《CSS样式的优先级补遗2》后才发现，原来属性选择符的优先级是比较特殊的，看看下面的例子： /*IE*/ div{float:left;color:Orange;} /* 特性值为...所以不难得出，属性选择符的特性值是在10到12之间，姑且写为11吧，以方便表示。
对DOM的两个主要扩展是Selectors API（选择符API）和HTML5。 一、选择符API Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。...1. querySelector()方法 querySelector()接受一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素返回null。...function matchesSelector(element, selec) 如果调用元素与该选择符匹配，返回true；否则，返回false。...Item 1 lastElementChild 指向最后一个子元素，lastChild的元素版 Item 5 previousElementSibling 指向前一个同辈元素...，previousSibling的元素版 李刚 nextElementSibling 指向后一个同辈元素，nextSibling的元素版 http://blog.csdn.net
发出一声反派的笑声（破音） 作死 先来看一段HTML代码 有部分 HTML 和 CSS 的书或者网上有些文章会说，元素上的 id 和 class 是不能以数字开头的...有部分文章也会说，HTML 可以支持 id 和 class 以数字开头，但 css 不支持。 我呸！
(n) p:nth-last-of-type(2) 选择符合的p元素，该p元素必须是其父元素的倒数第2个p子元素 :nth-of-type(n) p:nth-of-type(2) 选择符合的p元素，该p...当 style 没有设置 scope 属性时，style 内的样式会对整个 html 起作用。...实际上，lang=” “ 属性不只可以在 html 标签上设置，也可以在其他的元素上设置。 :dir 匹配指定阅读方向的元素。 当 HTML 元素中设置了 dir 属性时该伪类才能生效。...3.5 其他 选择器 示例 示例说明 :root 匹配文档的根元素 一般的 html 文件的根元素是 html 元素。...这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。
selector1中满足selector2选择器的内容，扔掉孙代 相邻元素选择器 $("selector1+selector2"); 选择满足选择器1元素后面的满足选择器2的元素 注意：只能选择相邻后面的一个 同辈元素选择器...$("选择器1~s选择器2"); 选择选择器1元素之后的同辈元素， 并且同辈元素满足选择器2的要求 注意：前面的同辈元素是不会被选择的（被选择元素不只一个） 属性过滤选择器（*） $(选择器[attributeName...这相当于:nth-child(1)； :last-child 匹配所给选择器( :之前的选择器)的最后一个子元素； 注意：:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素； :
于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。...一般稍微接触过css的网页设计人员，都会很快地学会三种css选择符： 元素选择符（例如：body 、a 、li ） ID选择符（例如：#head、#body、#foot） 类选择符（例如：.red、....item、.content） 更进一步之后，开始了解到一些进阶的选择符： 后代选择符（例如 #head .menu、#foot #copyright） 伪类选择符（例如 a:hover、a:link...） 以及由这些选择符组合起来形成的综合选择符。...实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种，其它的选择符在css中往往用来区别处理不同的浏览器，或者用在jQuery一类的框架中。本文就不提了。
如果你好奇为什么有相邻同辈选择器和一般同辈选择器，却没有可以选择前面的元素的选择器？原因如下： 浏览器之所以不支持向前选择同辈元素，主要是因为网页渲染性能的关系。...不跳过的同学，我们继续属性选择符、伪元素和伪类。 2.1.1 属性选择器 前面介绍了什么是属性选择器，也提到了有几种变种。下面我们来看下具体的用法。...但如果message类的前面或后面又添加了别的类名，如class="box message"/class="message box"/class="messagebox"，这个选择符都会失效。...适用于超链接的伪类 常见的 HTML 元素的基础样式表中，经常能看到下面这些关于超链接的样式。...2.5 为文档应用样式 我们可以通过 4 种方式将编写的 CSS 样式应用到 HTML 文档中。 元素 首先，我们可以把样式放在元素中，直接放在文档的标签内。
DOCTYPE html> <script type="text/javascript" src="jquery/jquery...选择集转移 $('div').prev(); //选择div元素前面紧挨的<em>同辈</em>元素 $('div').prevAll(); //选择div元素之前所有的<em>同辈</em>元素 $('div').next(); //选择...div元素后面紧挨的<em>同辈</em>元素 $('div').nextAll(); //选择div元素后面所有的<em>同辈</em>元素 $('div').parent(); //选择div的父元素 $('div').children...$('div').prevAll(); //选择div元素之前所有的<em>同辈</em>元素 ? $('div').next(); //选择div元素后面紧挨的<em>同辈</em>元素 ?
jQuery 1.1.3 （2007年7月）：这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。...jQuery 1.2 （2007年9月）：这一版去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。...jQuery 1.3 （2009年1月）：这一版使用了全新的选择符引擎Sizzle，库的性能也因此有了极大提升。这一版正式支持事件委托特性。...$("p").nextAll() //p节点之后所有的同辈节点 $("#node").nextUntil("#node2") //id为"#node"节点之后到id为'#node2'之间所有的同辈节点...,掐头去尾 $("p").prev() //紧邻p节点前的一个同辈节点 $("p").prevAll() //p节点之前所有的同辈节点 $("#node").prevUntil("#node2") /
用属性选择符来解决IE跟FF的兼容性问题 由 Ghostzhang 发表于 2006-04-24 11:39 从之前写过的《属性选择符的使用》中发现了一个可以用来解决IE跟FF兼容性的问题，因为IE...不支持CSS的属性选择符。...important声明提高样式的优先级不就完了吗，用属性选择符来为FF写样式意义不大。使用!important声明的确是比较方便，但IE6也认识这个声明，也就是说如果你给FF写了!...使用属性选择符就不会有这样的问题，而且可以将多个定义写到一起，是不是比较方便呢？看看下面的样式： /* 使用声明 */ div.try{ width:200px !...在《CSS样式的优先级补遗2》及《属性选择符的优先级》中我们了解到，ID选择符的特性值为100，而属性选择符的特性值为11，即不能达到将样式定义分开的目的。
DOCTYPE html> zepto zepto <meta name...4）同辈元素选择器 <!...同辈元素选择器选择的是元素之后的同辈元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到除p1外的所有p元素背景都变成了变成了pink。...在这里可以看出同辈元素选择器的选择顾名思义，其选择的元素是元素之后所有同辈的元素。 3.总结 zepto框架有四大常用选择器，基本选择器、层次选择器、属性选择器和基本过滤选择器。
.next()：获得ppys集合中的每一个元素紧邻的同辈元素。 .nextAll()：获得ppys集合中的每一个元素紧邻的全部同辈元素，由选择器进行筛选（可选）。....nextUntil()：获得每一个元素之后全部的同辈元素。直到遇到匹配选择器的元素为止。 .not()：从ppys集合中删除元素。 .offsetParent()：获得用于定位的第一个父元素。....prev()：获得ppys集合中的每一个元素紧邻的前一个同辈元素，有选择器进行筛选（可选）。 .prevAll()：获得ppys集合中的每一个元素之前的全部同辈元素，有选择器进行筛选（可选）。....prevuntil()：获得每一个元素之前全部的同辈元素，直到遇到匹配选择器的元素为止。 .siblings()：获得匹配元素集合中全部元素的同辈元素，由选择器筛选（可选）。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/116338.html原文链接：https://javaforall.cn
10、设置和获取HTML、文本和值示例代码 选择你喜欢的水果？...=$(“p”).html();//获取p元素的html代码，注意这里包含了 //如果需要重新设置，只需在html函数中加入参数，这个函数类似js中的innerHTML属性 $(“p”).html...(“这是新的内容”); //上面函数带的有html格式，如果只需要更改文字呢？...p”).children();//alert($p[0].innerHTML);获取到的内容是：这是span后代元素内容 var $ul=$(“ul”).children(); //获取同辈元素...，span和ul是同辈元素，可用$(“span”).next()获取到ul,同样可以用$(“ul”).prev()获取到span //想获取所有的同辈siblings() 12、CSS
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。...'之间所有的同辈元素,掐头去尾 $("p").prev() //紧邻p元素前的一个同辈元素 $("p").prevAll() //p元素之前所有的同辈元素 $("...查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止 siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。...(); //返回p元素的html内容 $("p").html("Hello nick!")...').html("444") 2.text（获取和设置匹配元素的内容） $('span').text() "222" 修改 $('span').text(444
function(){ /** * 当鼠标点击到a元素(它是class含有level1的子元素)的时候，给其添加一个名为current的class， * 然后将紧邻其后面的元素显示出来，同时将它的父辈元素的同辈元素内部的子元素...例如： //获取id为foo的元素内html代码。...注意： 用#id作为选择符取得的是jQuery对象而并非document.getElmentById(“id”)所得到的DOM对象，两者并不等价。注意分清jQuery对象和ＤＯＭ对象。...DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">... 论坛注册 <meta http-equiv="Content-Type" content="text/<em>html</em>; charset=utf-8"/
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
