:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...:nth-of-type(n)和:nth-last-of-type(n)选择器，这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。...:nth-of-type的值还可以设为odd或2n-1（奇数），even或2n（偶数），即为选择所有排序为奇数或偶数的元素 :empty选择器 :empty选择器用来选择没有子元素或文本内容为空的所有元素
元素选择器 通配选择器 * { sRules } 选定文档所有的元素 /** 设置所有元素为红色 **/ * { color: red; } 我是div 我是p我是div 关系选择器 后代选择器 E F { sRules } 选定文档元素 E 所有的后代元素 F，包含所有子孙 /* 设置 div 后代所有的 p 为红色 */ div p { ...CSS3 E:nth-child(n) { sRules } 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素 匹配父元素的第 n 个子元素...(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效 ...，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p 元素为父元素的第三个元素
你用来做一些操作比如说选择某种类型的所有元素，就像下面这样： div { /* 一些应用在所有 div 元素上的样式 */ } 或者你可以选择一个在它的父元素下的最后一个子元素： ul li:last-child...{ /* 一些只应用在列表的最后一个子元素上的样式 */ } 当然，你也可以去做一些更复杂的事情，比如说选择选择列表中除了最后一个子元素之外的所有子元素。...例如，比较以下这两个： ul li { /* 一些应用在所有子元素上的样式 */ } ul li:last-child { /* 一些样式用来重置上面生效的样式，因为上面的样式不适用于上面最后一个子元素...*/ } ui li:nth-last-child(n+2) { /* 一些应用在除了最后一个子元素之外的所有子元素上面的样式 */ } ul li属于第一级选择器。...浏览器支持（在我写这篇文章的时候，还没有任何一个浏览器支持这个第四级选择器。） :nth-child选择器匹配作为其父级的第 n 个子元素。
CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。 1、格式：（第一部分） E:first-child 匹配父元素的第一个子元素E。...E:last-child 匹配父元素的最后一个子元素E。 E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。...E:nth-child(odd) 匹配奇数 E:nth-child(even) 匹配偶数 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。...（当n小于1时无效，因为n = 0 也是不会选中的） 如果选择器写成li:nth-child(2n)，则表示所有的第偶数个 li。...如果选择器写成li:nth-child(2n+1)，则表示所有的第奇数个 li。 如果选择器写成li:nth-child(-n+5)，则表示前5个 li。
选择器（重点） 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。...比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。...:last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child...(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。...color: skyblue; } 目标伪类选择器(CSS3) :target目标伪类选择器 :选择器可用于选取当前活动的目标元素 :target { color:
:first-child和last-child选择器 :first-child选择器和:last child选择器分别用于为父元素中的第-个或者最后一个子元素设置样式。...:nth-child(n)和nth-last-child(n)选择器 使用:first- child选择器和:last- child选择器可以选择某个父元素中第-一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。...:nth-of-type(n)和:nth-last-of-type(n)选择器 这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。
1. jQuery选择器 - 选择器都是以 $() 开头的 基础选择器 选择器 描述 id选择器 指定id元素 class选择器 遍历css类元素 element元素 遍历HTML元素 *选择器 遍历所有元素...DOM元素之间的父子关系作为匹配筛选条件的选择器 选择器 描述 ancestor descendant 在给定的祖先元素下匹配所有的后代元素 parent>child 在给定的父元素下匹配所有的子元素....css( "border", "3px double red" ); 属性选择器 属性选择器是通过元素的属性作为过滤条件进行筛选对象 名称 说明 举例 [attribute] 匹配包含给定属性的元素...： 不分元素类型的 选择器 说明 :first-child 选择父元素的第一个子元素 :last-child 选择父元素的随后一个子元素 :nth-child(n) 选择父元素下的第n个或奇偶元素,n的值为...选择同元素类型的随后一个子元素 :nth-of-type 选择同元素类型的第n个或奇偶元素,n的值为"整数或odd或even" :only-of-type 匹配父元素中特定类型的唯一子元素(该父元素可以有多个子元素
而对于css来讲，它的选择器就是能帮他找到指定元素的方法。 2....(n) 选择父元素的第n个子元素，父元素是E，子元素是F E F:nth-last-child(n) 选择父元素的倒数第n个子元素，父元素是E，子元素是F E F:nth-of-type(n) 选择父元素的具有指定类型的第...n个子元素，父元素是E，子元素是F E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素，父元素是E，子元素是F E:first-of-type 选择父元素中具有指定类型的第...匹配所有元素中的第一个元素 p:first-child i 匹配所有作为第一个子元素的元素中的所有 元素 6、:lang 相当于|=属性选择器(IE7-不支持) p:lang(en...示例：* 作用：选择所有元素 参考 CSS选择器 CSS Selectors 深入理解伪元素 深入理解CSS伪类 W3school-CSS 选择器参考手册 css属性选择器=,|=,^=,$=
-- 结果属于第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-child(n) { ...查找第n个子selector，后同。 } 第 an+b 个子节点(n从0开始的递增值，a、b为数字。) --> selector:nth-child(an+b) { ... } 元素的属于第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-of-type(n) { ... } 元素的属于第 an+b 个子节点(n从0开始的递增值，a、b为数字。)...:target 当元素被呼叫时 :first-child 当元素为第一个子节点时 :last-child 当元素为最后一个子节点时 例让所有书签被呼叫时，字体颜色为红色： *:target { color
获取第一个子元素 :last-child 获取最后一个子元素 :only-child 如果当前元素是唯一的子元素，则匹配 :nth-last-child(index/even/odd/公式) 选择所有它们父元素的第...n个子元素。...计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个 带有“of-type” 与未带有“of-type”项的选择器有一定的区别。...过滤方法： 语法 说明 eq(index) 获取第N个元素 filter(expr|obj|ele|fn) 使用选择器、对象、元素或函数完成指定元素的筛选 hasClass(class) 检查当前的元素是否含有某个特定的类
选择符合的p元素，该p元素必须是其父元素的最后一个p子元素 :not(selector) :not(p) 选择所有p以外的元素 :nth-child(n) p:nth-child(2) 选择符合的p元素...，该p元素必须是其父元素的第2个子元素 :nth-last-child(n) p:nth-last-child(2) 选择符合的p元素，该p元素必须是其父元素的倒数第2个子元素 :nth-last-of-type...(n) p:nth-last-of-type(2) 选择符合的p元素，该p元素必须是其父元素的倒数第2个p子元素 :nth-of-type(n) p:nth-of-type(2) 选择符合的p元素，该p...:first-child和:first-of-type的区别 :first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。...同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
(如class属性)，值表现为以空格隔开，使用时需要单个取出使用组合选择器组合选择器就是同时使用多个基础选择器，从而更好地筛选出目标元素选择器 格式 示例...p:last-child 选择所有\元素且该元素是其父级的最后一个子元素顺序选择器 :nth-child(n)...p:nth-child(2) 选择所有\元素且该元素是其父级的第二个子元素顺序类型选择器 :nth-of-type(n) p:nth-of-type(2)...选择所有\元素且该元素是其父级的第二个\元素倒序选择器 :nth-last-child(n) p:nth-last-child(2) 选择所有\元素且该元素是其父级的倒数第二个子元素倒序类型选择器...:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有\元素且该元素是其父级的倒数第二个\元素
依赖库：jquery-XXX.js 语法：$() 正文 5择器 id选择器 $(“#id值”) 样例：$(#span1).css(“color”,”red”); 标签选择器 $(“标签名称”) Class...：image；：File 演示样例： $(“:input”).css(“cursor”,”wait”); 条件限定选择器 基本条件限定 :first :last :lt :gt :odd（奇数...:has(selector)返回值:Array匹配含有选择器所匹配的元素的元素一个用于筛选的选择器演示样例描写叙述:给全部包括 p 元素的 div 元素加入一个 text 类HTML...N个子或奇偶元素 ‘:eq(index)’ 仅仅匹配一个元素，而这个将为每个父元素匹配子元素。...>:nth-child(3n+2) 參数 index Number 要匹配元素的序号。
，从而更好地筛选出目标元素 选择器 格式 示例 示例说明 标签指定属性 标签加属性描述 input#su...p:last-child 选择所有\元素且该元素是其父级的最后一个子元素 顺序选择器 :nth-child(n)...p:nth-child(2) 选择所有\元素且该元素是其父级的第二个子元素 顺序类型选择器 :nth-of-type(n) p:nth-of-type(2)...选择所有\元素且该元素是其父级的第二个\元素 倒序选择器 :nth-last-child(n) p:nth-last-child(2) 选择所有...\元素且该元素是其父级的倒数第二个子元素 倒序类型选择器 :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有\元素且该元素是其父级的倒数第二个
今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。...E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb...E:first-child 匹配父元素的第一个子元素 14. E:link 匹配所有未被点击的链接 15. E:visited 匹配所有已被点击的链接 16....E:root 匹配文档的根元素，对于HTML文档，就是HTML元素 33. E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 34....E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 35.
使用公式：(“element”) 示例：(“div”) //获取所有div元素 3.类名选择器 类选择器是通过元素拥有的CSS类的名称查找匹配的...在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。...简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。...2. parent>child选择器 parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素...(index/even/odd/equation) 说明：匹配可每个父元素下的第index个子或奇偶元素，index从1开始，而不是从0开始
简介CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活，是前端开发中常用的定位元素的方式。...选择所有\元素且该元素是其父级的第一个元素最后子元素 :last-child p:last-child 选择所有\元素且该元素是其父级的最后一个子元素顺序选择器...:nth-child(n) p:nth-child(2) 选择所有\元素且该元素是其父级的第二个子元素顺序类型选择器 :nth-of-type(...n) p:nth-of-type(2) 选择所有\元素且该元素是其父级的第二个\元素倒序选择器 :nth-last-child(n) p:nth-last-child...(2) 选择所有\元素且该元素是其父级的倒数第二个子元素倒序类型选择器 :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有\元素且该元素是其父级的倒数第二个
","号分割多个expr，用于实现多个条件筛选. ilter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。...end().css("border", "2px red solid"); JQuery Selectors选择器方法说明 基本选择器 $("#myDiv") 匹配唯一的具有此id值的元素 $("div...子元素过滤选择器 $("ul li:nth-child(2)"), $("ul li:nth-child(odd)"), 匹配父元素的第n个子元素 $("ul li:nth-child(3n + 1)...") $("div span:first-child")匹配父元素的第1个子元素 $("div span:last-child") 匹配父元素的最后1个子元素 $("div button:only-child...") 匹配父元素的唯一1个子元素 表单元素选择器 $(":input") 匹配所有的表单输入元素，包括所有类型的input, textarea, select 和 button $(":text") 匹配所有类型为
会使用CSS3高级选择器美化网页 掌握HTML5新增的表单元素及属性 2、HTML5应用场景 酷炫网站制作 游戏开发 移动开发 应用开发 3、什么是HTML5 HTML5是用于取代HTML...time 标签定义日期或时间所有的浏览器都不支持，作用就是用来标识时间，方便爬虫获取 tabindex 规定元素的tab键迭制次序 body> 元素最后一个子元素，如果最后一个子元素不是p,则不生效 nth-child(n) p:nth-child(n)选择属于其父元素的第n个子元素，n从1开始 nth-of-type...(n) p:nth-of-type(n)选择属于其父元素的第n个p元素 :before p:before在每个元素的内容之前插入内容 :after p:after在每个元素的内容之后插入内容 last-child p:last-child选择属于其父元素最后一个子元素 nth-child(n) p:nth-child(n)选择属于其父元素的第n个子元素
Safari Opera 22、 X:nth-child(n) ：选择每第 n 个元素选择器 如果你要匹配一组序列元素每第几个元素，你可以使用 :nth-child 选择器满足这个需求，要注意的是nth-child...指序列里的第n个元素，从1开始。...X:nth-of-type(n)：选择每第n个某种元素选择器 有时候你可能有这样的需求，想通过元素类型type进行选择，而不是子元素 child，你可以考虑 X:nth-of-type(n)，假设有5个无序列表...X:nth-last-of-type(n)：从后往前计算选择每第n个某种元素选择器 比如我们可以使用nth-last-of-type来选择倒数第n个元素。...X:last-child：最后一个子元素选择器 有第一个子元素选择器，自然会有最后一个子元素选择器，示例代码如下： ul > li:last-child { color: green; } 比如下面一个例子
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
