开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS -子选择器-第n个-子(1)-交错-只选择第一个元素一次

CSS -子选择器-第n个-子(1)-交错-只选择第一个元素一次

CSS（层叠样式表）是一种用于描述网页样式的标记语言。它可以控制网页的布局、字体、颜色、背景等方面的样式。在CSS中，子选择器是一种选择器，用于选择指定元素的直接子元素。

第n个子选择器（:nth-child）是一种CSS伪类选择器，用于选择指定元素的第n个子元素。它可以通过指定一个公式来选择元素，例如:nth-child(2n)表示选择偶数位置的子元素，:nth-child(3n+1)表示选择位置为3的倍数加1的子元素。

交错选择器（:nth-of-type）是一种CSS伪类选择器，用于选择指定元素类型的第n个元素。它与第n个子选择器类似，但只考虑指定元素类型的元素。

只选择第一个元素一次（:first-of-type）是一种CSS伪类选择器，用于选择指定元素类型的第一个元素。

这些选择器在前端开发中经常用于选择特定位置或类型的元素，以实现样式的精确控制。

以下是一些相关的腾讯云产品和产品介绍链接地址：

腾讯云CSS CDN：腾讯云的内容分发网络（CDN）服务，用于加速网站的静态资源访问速度。了解更多信息，请访问：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：腾讯云提供的弹性计算服务，用于部署和运行各种应用程序。了解更多信息，请访问：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）：腾讯云提供的多种类型的数据库服务，包括关系型数据库、NoSQL数据库等。了解更多信息，请访问：https://cloud.tencent.com/product/cdb

请注意，以上链接仅供参考，具体的产品选择应根据实际需求进行评估和决策。

相关搜索:CSS在第n个元素后断开子元素 CSS选择父级的第n个直接子元素如何使用Jquery和类选择器获取元素的第一个子文本？如何才能按类只选择容器的第一个子元素？第n-子元素的第一个和最后一个都应用于元素考虑到文本节点，第一个子元素有CSS选择器吗？区块链登记系统如何申请大宗商品区块链系统如何申请区块链如何申请企点客服如何申请

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery获取第几个子元素_js获取元素的指定子元素

元素；对于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素； :nth-child(n)：返回第n个子节点，n从1开始，如果n取0，...； :eq(n)：第n个匹配的元素(n从0开始)，如：li:eq(3)返回整个页面的第四个li元素，ul li:eq(1)返回页面中第一个ul元素下的第二个li元素，注意：只匹配一次就返回了； :gt...(n)：第n个匹配元素(不包括)之后的元素(n从0开始)，如：ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个)； :lt(n)：第n个匹配元素(不包括)之前的元素(n从0开始)，如：ul...:lt(2)返回从第0个和第1个ul元素； 2....利用css选择器进行选择：元素标签名：比如说(”a“)会选出所有链接元素； #id：通过元素id进行选择，比如说(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择

27.1K3 0

CSS入门5-选择器

(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 选择父元素中具有指定类型的第...1个子元素，与E:nth-of-type(1)相同 E:last-of-type 选择父元素中具有指定类型的最后1个子元素，与E:nth-last-of-type(1)相同 E:only-child 选择父元素中只包含一个子元素...，子元素是E E:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是E E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点　　[注意]n可以是整数(从1开始)，...匹配所有元素中的第一个元素 p:first-child i 匹配所有作为第一个子元素的元素中的所有元素 6、:lang 相当于|=属性选择器(IE7-不支持) p:lang(en

8003 0

CSS3新增选择器

下面介绍： css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器 属性选择器语法如下（E表示标签）： 选择器 功能描述 E[attribute] 选取带有指定属性的元素...E的子元素 E:nth-of-type(n) 选择所有在其父元素中同类型第n个位置的匹配E的子元素 E:nth-last-of-type(n) 选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素...E:last-child 选择位于其父元素中最后一个位置，且匹配E的子元素，与E:nth-last-child(1)等同 E:fisrt-child 选择位于其父元素中第一个位置，且匹配E的子元素，...与E:nth-child(1)等同 E:first-of-type 选择在其父元素中匹配E的第一个同类型子元素 E:last-of-type 选择在其父元素中匹配E的最后一个同类型子元素 E:only-child...选择在其父元素中只包含一个子元素，且该子元素匹配E。

5214 0

【CSS3】CSS3 结构伪类选择器 ( E:first-child E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

一、CSS3 结构伪类选择器 ---- 常见的结构伪类选择器 : E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择匹配的父容器中的 第一个 E 类型标签子元素...: 该选择器 选择匹配的父容器中的第 n 个 E 类型标签子元素 ; E:nth-child(n) 选择器 缺陷 : 如果父容器中的子元素类型不同 , 那么使用 E:nth-child...(n) 选择器 : 该选择器 选择匹配的父容器中的第 n 个 E 类型标签子元素 ; E:nth-child(n) 选择器中的 n 可以有如下情况 : 数字 : 数字代表父容器中子元素的索引值...; n 从 1 开始计数 ; ul li:nth-child(1) { /* 结构伪类选择器 选择 ul 父容器下的第 1 个 li 子元素 */...(n) 选择器 : 该选择器 选择匹配的父容器中的第 n 个 E 类型标签子元素 ; E:nth-child(n) 选择器 缺陷 : 如果父容器中的子元素类型不同 , 那么使用 E:nth-child

1.2K3 0

jquery 常用方法总结

") 层次选择器 $("div p") 包含选择器 div中所有的p 子元素子子元素.. ...$("div > p") 子后代选择器 div中直接子后代 $("div + p")第一个兄弟p 简单选择器 :first 选取第一个元素 $("div:first")... :last 选取最后一个元素 :not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)") :even、:odd，选取索引是奇数、偶数的元素...map([1,2,3]funtion(n){return n+1;} .click(funtion(){}) .mouseover(funtion(){}) .mouseout...：的有简单选择器和表单选择器和表单对像选择器 还有一个内容选择器，$("div:contains('John')") 这里有一个特别的表单元素。

1.6K0 0

css 总结1 原

6、CSS 后代选择器 h1 em {color:red;} 7、CSS 子元素选择器 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。...选择器中:first-child与:first-of-type的区别 p:first-child 匹配p元素父元素的第一个子元素，若第一个子元素不是p元素，则匹配不到任何元素 p:first-of-type...p，没有其他的子元素（8）only-of-type // p:only-of-type （匹配p的父元素只有一个p元素，子元素可能包含其他的元素）（9） :nth-child(n)...选择属于父元素的第n个子元素（10）:nth-last-child(n) 选择属于父元素倒是第n个元素（11）p:nth-of-type(n) 选择属于其父元素第n个p元素（不是p元素的不在排序范围...）（12）p:nth-last-of-type(n) 选择属于其父元素倒数第n个p 元素（13）p:empty 选择p元素没有内容的p元素（14）target伪类 #news:target

6433 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.后代选择器 后代选择器：选中元素内部中所有的指定的某个元素，包括子元素和其它后代元素。...和后代选择器很相似，但却有不同。（1）语法格式 M>N{} ① 说明 M元素和N元素之间用 > 隔开，表示选中M元素内部的子元素N。...（2）子代选择器与后代选择器区别后代选择器，选取的是元素内部所有的元素，包括子元素。子代选择器，选取的是元素内部某一个元素，只限子元素。（3）示例 ① 例1 <!...（1）语法格式 M N{} ① 说明 M元素和N元素之间用 + 隔开，表示选中 M 元素后面某一个相邻的兄弟元素 N。

1.4K4 1

初识CSS3

">hhhh 注意:id选择器只能使用一次，也就是说在同一页面同一个id属性只能设置一次；而类选择器可以在页面使用多次 3)选择器的优先级　　id选择器>class类选择器>标签选择器...层次选择器 　　1）E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素中　　2） E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配E元素的子元素　　3...E元素相邻的后面兄弟元素下，是一个或多个元素；　　2）相邻兄弟选中的是与E元素仅挨的F元素，其中选中的仅是一个元素 8.结构伪类选择器 　　1）E：first-child 作为父元素的第一个子元素的元素...E 　　 2） E：last-child 作为父元素的最后一个子元素的元素E 　　3）E F：nth-child（n）选择父级元素E 的第n个元素F（n可以是1/2/3）关键字为even odd...(n) 选择父元素内具有指定类型的第n个F元素注：E F：nth-child（n）和 E F:nth-of-type(n)使用时记住以下关键点：　　　　　1）E F：nth-child（n）在父级里从第一个元素开始查找

7538 0

CSS3选择器–结构性伪类选择器

在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种...因为nth-child选择器在计算子元素是第n个元素，是连同所有父元素中所有子元素一起计算的，这样的话，p2其实是第三个元素，但是h1和h2由于没有被选中，所以颜色不变。...2、E:nth-of-type(n) 和E:nth-last-of-type(n) 1）“E:nth-of-type(n)”选择器和“E:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素...3、E:first-child和E:last-child 1）“E:first-child”选择器表示的是选择父元素的第一个子元素的元素E。...简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。案例代码： <!

4921 0

CSS 基础

一、什么是CSS对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定二、CSS发展史三、CSS基本语法结构1、语法选择器{ 声明1; 声明2; … }2、例如h1...标签，类选择器可在页面中多次使用，ID选择器在同一个页面中只能使用一次5、基本选择器的优先级ID选择器>类选择器>标签选择器七、CSS的高级选择器1、层次选择器选择器类型功能描述E F后代选择器选择匹配的...F元素，且匹配的F元素被包含在匹配的E元素内E>F子选择器选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面E~F通用兄弟选择器选择匹配的...作为父元素的第一个子元素的元素EE:last-child作为父元素的最后一个子元素的元素EE F:nth-child(n)选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、oddE...:first-of-type选择父元素内具有指定类型的第一个E元素E:last-of-type选择父元素内具有指定类型的最后一个E元素E F:nth-of-type(n)选择父元素内具有指定类型的第n个

2843 0

CSS选择器

下述内容主要讲述了《HTML5权威指南》第17、18章关于“使用CSS选择器（第I部分、第II部分）”。一、前传 1....后代选择器：匹配任意包含在匹配第一个选择器的元素中的元素，而不仅是直接子元素。子代选择器：只匹配元素中的直接后代。示例：相邻兄弟选择器&普通兄弟选择器 <!...选择器说明 :root 匹配文档中的根元素（返回html元素） :first-child 选择元素的第一个子元素 :last-child 选择元素的最后一个子元素 :only-child 选择元素的唯一子元素...:only-of-type 选择元素指定类型的唯一子元素 :nth-child(n) 选择父元素的第n个子元素 :nth-last-child(n) 选择父元素的倒数第n个子元素 :nth-of-type...(n) 选择父元素定义类型的第n个子元素 :nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素示例：子元素选择器 <!

1.4K5 1

jQuery选择器和选取方法

由于第一个元素的序号是0，因此实际上选中的是第1个、第3个、第5个等元素(jQuery的扩展) :file 匹配元素(jQuery的扩展) :first 匹配列表中的第一个元素...更常见的情况是，n是xn或x n+y这种计算公式，其中x和y是整数，n是字面量n。因此可以用nth-child(3n+1)来选取第1个、第4个、第7个等元素。...注意该过滤器的序号是从1开始的，因此如果一个元素是其父节点的第一个子元素，会认为它是奇数元素，匹配的是3n+1，而不是3n。...例如，下面这个选择器选取的元素在其父节点的子元素中排行第1或第2等，只要它们含有“JavaScript”单词，就不包含元素。...first()返回的jQuery对象仅包含选中元素中的第一个，last()返回的jQuery对象则只包含最后一个元素。更通用的是，eq()方法返回物Query对象只包含指定序号的单个选中元素。

5.1K4 0

CSS选择器详解

(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效 ...html，即E可以是html的子元素，也就是说E可以是body 该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E /* 设置第一个元素类型为 p 的元素为红色...CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素...，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p 元素为父元素的第三个元素...(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body 该选择符总是能命中父元素的倒数第

2.8K4 0

常用的CSS3选择器

（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...（2）普通兄弟选择器 普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。...:first-child和:last-child选择器 :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。...:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...2个或倒数第2个子元素，这两个选择器就不起作用了。

4.1K2 0

CSS 1.0~3.0选择器（下）

HTML5学堂：对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用，我们那么有些选择器还是无法简单获取某元素，对于CSS3的选择器的产生，让我们更加方便的获取元素，本文讲解了CSS3的选择器有哪些...n个子元素，第一个编号为1E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素...(1)E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type...匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)E:empty匹配一个不包含任何子元素的元素...，注意，文本节点也被看作子元素 10.CSS 3的反选伪类 选择器含义示例E:not(s)匹配不符合当前选择器的任何元素:not(p) { border:1px solid #ccc; } 11.

7463 0

css3选择器

CSS3新增选择器 属性选择器 E[attr]只使用属性名，但没有确定任何属性值 E[type="text"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值...n) 表示E父元素中的第n个字节点，且类型为E E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算 E:empty 表示E元素中没有子节点。...注意：子节点包含文本节点 E:first-child 表示E元素中的第一个子节点==nth-child(1) E:last-child 表示E元素中的最后一个子节点 E:first-of-type...表示E父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。...E:checked 表示已选中的checkbox或radio 伪元素选择器 E::first-line 表示E元素中的第一行 E::first-letter 表示E元素中的第一个字符 E::selection

4312 0

CSS 01 准备选择器、伪元素

CSS3 浏览器支持情况网址查询：caniuse.com CSS3的伪类选择器（一）动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器...部分 li:fist-child{} 元素的第一个子元素选中 li:last-child{} 元素的最后一个子元素选中 li:nth-child...(****){} 选中顺序从左往右 li:nth-child(2n){} 元素的第偶数个子元素选中 li:nth-child(2n+1){} 元素的第奇数个子元素选中...li:nth-child(n+5){} 元素从第5个子元素开始选中 li:nth-child(4n+1){} 元素每4个元素选中...li:only-child{} 选择的元素是它父元素只有一个子元素 li:only-of-type{} 选择的元素是它父元素只有一个子元素，但是限制子元素的标签类型为li

9164 0

CSS基础知识

以上选择器可配合一起使用：tagname.class-name[tag-attribute=keyword] {...}。（注意：单个文件中，id选择器只能拥有一个，且只能使用一次。）...-- 结果属于第一个子节点（查找div下面的第一个子节点） --> div :first-child { ... } div :not(a:last-child) { ... } <!...-- 结果相同元素的属于第 an+b 个子节点(n从0开始的递增值，a、b为数字。)...:target 当元素被呼叫时 :first-child 当元素为第一个子节点时 :last-child 当元素为最后一个子节点时例让所有书签被呼叫时，字体颜色为红色： *:target { color

1451 0

一文学会Python爬虫框架scrapy的XPath和CSS选择器语法与应用

使用XPath选择器和CSS选择器解析网页的速度要比BeautifulSoup快一些。...表1 XPath选择器常用语法语法示例功能说明 div 选择当前节点的所有div子节点 /div 选择根节点div //div 选择所有div节点，包括根节点和子节点 //ul/li 选择所有ul.../a[last()] 选择div节点内部最后一个a节点 //div/a[last()-1] 选择div节点内部倒数第二个a节点 //a[position()>3] 选择每组中第4个开始往后的a节点 //...的节点 ul li 选择所有位于ul节点内部的li子节点 ul>li 选择所有位于ul节点内的直接子节点li base+title 选择紧邻base节点后面的第一个平级title节点 br~img 选择所有与...a:nth-child(3) 选择第3个a节点 a:nth-child(2n+1) 选择所有第奇数个a节点 a:nth-child(2n) 选择所有第偶数个a节点 li:last-child 选择每组中最后一个

1.5K1 0

这30个CSS选择器，你必须熟记（下）

指序列里的第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:first-child：第一个子元素选择器 这个选择器通常选择第一个子元素，我们常常为第一个或者最后选项卡设置默认的视觉效果，比如去掉元素的边框，示例代码如下： ul >li:first-child...X:last-child：最后一个子元素选择器 有第一个子元素选择器，自然会有最后一个子元素选择器，示例代码如下： ul > li:last-child { color: green; } 比如下面一个例子

6940 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭