首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css nth-of-type长列表中的第一个、第二个、第三个

在CSS中,nth-of-type是一个伪类选择器,用于选择父元素下特定类型的子元素。它可以根据子元素在父元素中的位置来选择元素。

对于一个长列表中的第一个、第二个、第三个元素,可以使用nth-of-type来选择它们。

  1. 第一个元素:使用:nth-of-type(1)选择器来选择第一个元素。例如:
代码语言:txt
复制
li:nth-of-type(1) {
  /* 样式规则 */
}
  1. 第二个元素:使用:nth-of-type(2)选择器来选择第二个元素。例如:
代码语言:txt
复制
li:nth-of-type(2) {
  /* 样式规则 */
}
  1. 第三个元素:使用:nth-of-type(3)选择器来选择第三个元素。例如:
代码语言:txt
复制
li:nth-of-type(3) {
  /* 样式规则 */
}

这些选择器可以应用于任何包含子元素的父元素,例如ul、ol等列表元素,或者div等容器元素。

应用场景:

  • 当需要对长列表中的特定位置的元素应用不同的样式时,可以使用nth-of-type选择器来选择这些元素。
  • 在导航菜单中,可以使用nth-of-type选择器来选择特定位置的菜单项,以应用不同的样式。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发:https://cloud.tencent.com/product/mobile
  • 腾讯云区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙(Metaverse):https://cloud.tencent.com/product/metaverse

请注意,以上链接仅为示例,具体的产品选择应根据实际需求和情况进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css3基础知识——回顾

css3巩固学习       css3巩固学习     结果:第一个第三个文本会变红 首字符匹配选择器.../p>       css3巩固学习       css3巩固学习     结果:第一个第二个文字变为红色,第三个颜色不变...p>       css3巩固学习       css3巩固学习     结果:第一个第三个文字变成红色,第二个颜色不变...2.伪类选择器 指定元素列表第一个元素:first-child     语法:li:first-child{}     示例:                li:first-child...css3巩固            结果:第一个li文字变为红色 指定元素列表中最后一个元素:last-child     语法:li:last-child{}

89170

selenium之css定位小结

CSS 选择器 常见符号 #表示 id选择器 .表示 class选择器 >表示子元素,层级 一个空格也表示子元素,但是是所有的后代子元素,相当于 xpath 相对路径 一、css:属性定位 1.css...,直接翻译过来就是第几个小孩 总结:选择标签后,找第几个小孩即可 Select控件第三个Opel #select>select>option:nth-child(3) CheckBox第一个Volvo...#checkbox>input:nth-child(1) CheckBox第二个Saab #checkbox>input:nth-child(4) RadioBox第二个Saab #radio>input...:nth-child(4) 通过索引nth-of-type(2)来定位子元素,按照分类指定 选择selectsaab #select>select>option:nth-of-type(2); 选择...id 为 radio div 下第 1 个子节点 div#radio>input:nth-of-type(4)+label 选择id 为radio div 下第4 个input 节点之后挨着

58720

这些 CSS 伪类,你可能还不知道,可以用起来了!

只有第一个第二个div有作用,因为它们确实是空第三个 div 没有作用,因为它有一个换行。...:first-of-type | 选择指定类型第一个子元素 :first-of-type表示一组兄弟元素其类型第一个元素。...:last-of-type | 选择指定类型最后一个子元素 :last-of-type CSS 伪类 表示了在(它父元素)子元素列表,最后一个给定类型元素。...nth-of-type() | 选择指定类型子元素 :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点标签, 用 n 来筛选出在一组兄弟节点位置。....innerDiv p:nth-last-of-type(1) { color: orangered; } 这会选择innerDiv元素包含类型为p元素列表最后一个子元素。

97820

这30个CSS选择器,你必须熟记(下)

在上两篇文章里,《这30个CSS选择器,你必需熟记(上)》和 《这30个CSS选择器,你必需熟记()》这两篇文章里,我们一起学习了前20个,本篇文章我们一起学习剩下10个选择器。...X:nth-of-type(n):选择每第n个某种元素选择器 有时候你可能有这样需求,想通过元素类型type进行选择,而不是子元素 child,你可以考虑 X:nth-of-type(n),假设有5个无序列表...如果你想定义第三个ul样式,但又没有id来进行匹配,那么可以使用伪类nth-of-type(n)。...,我们创建一个无序列表样式,需要加上边框深度,让层次更明显(分割线),又不想让第一个元素上边框和最后一个元素下边框有线条感觉,这两个伪类就派上用场了,示例代码如下: ul { width...实现方法比较多,如下所示: 方案1 ul:first-of-type > li:nth-child(2) { font-weight: bold; } 上述代码,首先找到页面第一个无序列表,然后找到它直接子元素

53420

这30个CSS选择器,你必须熟记(下)

在上两篇文章里,《这30个CSS选择器,你必需熟记(上)》和 《这30个CSS选择器,你必需熟记()》这两篇文章里,我们一起学习了前20个,本篇文章我们一起学习剩下10个选择器。...X:nth-of-type(n):选择每第n个某种元素选择器 有时候你可能有这样需求,想通过元素类型type进行选择,而不是子元素 child,你可以考虑 X:nth-of-type(n),假设有5个无序列表...如果你想定义第三个ul样式,但又没有id来进行匹配,那么可以使用伪类nth-of-type(n)。...,我们创建一个无序列表样式,需要加上边框深度,让层次更明显(分割线),又不想让第一个元素上边框和最后一个元素下边框有线条感觉,这两个伪类就派上用场了,示例代码如下: ul { width...实现方法比较多,如下所示: 方案1 ul:first-of-type > li:nth-child(2) { font-weight: bold; } 上述代码,首先找到页面第一个无序列表,然后找到它直接子元素

70300

总结CSS3新特性(选择器篇)

..就是除了第一个p所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/} [attribute^=value]: 选择该属性以特定值开头元素 [attribute$...,通过判断是否有http.com什么(等到CSS4选择器问世就不用这么麻烦了[:local-link]) :first-of-type与:last-of-type: 从字面大概能看出来是干嘛使得,第一个这个类型...n个子元素,可以结合选择器来限制 结合变量n(应该说是关键字吧= =),可以用来在表格里,列表里做隔行换色什么 :nth-last-child(n): 基本同上…只不过是从后往前数 :nth-of-type...(n): 这个跟上边让我很蛋疼- -这两者区别一直让人很凌乱,详情看下图 通过w3school上边做. p:nth-child(2)将父元素中子元素第二个为pp颜色设为红色, p:nth-of-type...(2)将子元素第二个p背景色设为绿色- -好乱; 我认为两者却别在于,nth-of-type计数过滤标签类型,而nth-child计数不过滤; :nth-last-of-type(n): 这个不做解释了

62140

CSS】776- 16个非常有用CSS伪选择器

在 RSS ,则为 RSS 元素. 这个伪类选择器应用于根元素,多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个伪类选择器将选中没有任何子项元素。...这个规则将应用于第一个第二个 div,因为他们是真为空,而第三个 div 包含空格。 6、:only-child | 选择仅有的子元素 匹配父元素没有任何兄弟元素子元素。...9、:nth-of-type() | 选择特定类型子元素 这个选择器将从指定父元素孩子列表中选择某种类型子元素。....innerDiv p:nth-of-type(1) { color: orangered; } 10、:nth-last-of-type() | 选择列表末尾中指定类型子元素 这将选择最后一个指定类型子元素....innerDiv p:nth-last-of-type() { color: orangered; } 这将选择 innerDiv 列表元素包含最后一个段落类型子元素。

75030

css3nth-child选择器详细探讨

在那个蛮荒时代,各大浏览器对CSS支持是相当那啥了.于是,我们为了实现一些效果,比如要控制列表最后一个元素,我们会给最后一个元素加上一个CLASS,来方便我们特殊处理.如果要做各行变色这种特殊效果...: #000;} 如上面的CSS所示,如果要选择第三个,就写3即可....选择第三个到第九个之间奇数行(不包括3\9) ○○○○●○●○○○12345678910 怎么做呢?...是从第一个开始计数,而nth-last-child是从倒数第一个开始计数 那么上面的问题,就有答案了. ul.list li:nth-last-child(-n+2){background: #000...(2n){background: #000;} dl.dl dd:nth-of-type(2n+1){background: #06f;} 最后总结 CSS3提供这些强大选择器,可以让我们在具体项目当中

46710

总结伪类和伪元素(转)

直译过来就是:css引入伪类和伪元素概念是为了格式化文档树以外信息。也就是说,伪类和伪元素是用来修饰不在文档树部分,比如,一句话第一个字母,或者是列表第一个元素。...下面是一个简单html列表片段: 我是第一个 我是第二个 如果想要给第一项添加样式,可以在为第一个添加一个类,并在该类定义对应样式...HTML: 我是第一个 我是第二个 CSS: li:first-child { color: orange } 下面是另一个简单...3n+4匹配位置为4、7、10、13…子元素。 如下例,有以下HTML列表: ? CSS: 选择第二个元素,”Beta”会变成橙色: ?...8 :nth-of-type :nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型元素。 如下例,第二个元素会变为橙色。 HTML: ? CSS: ?

1.4K20

css选择器:first-child与:first-of-type区别

http://www.cnblogs.com/2050/p/3569509.html :first-child选择器是css2定义选择器,从字面意思上来看也很好理解,就是第一个子元素。...p:first-child  匹配到是p元素,因为p元素是div第一个子元素; h1:first-child  匹配不到任何元素,因为在这里h1是div第二个子元素,而不是第一个; span:first-child...  匹配不到任何元素,因为在这里两个span元素都不是div第一个子元素; 然后,在css3又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?...; span:first-of-type  匹配到第三个子元素span。...同样类型选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。 分类: css+html

98610

CSS3选择器 | 每个前端开发者必须要掌握技术

结构性伪类选择器 css已经定义好选择器,不能随便起名字 选择符 含义 :root 将样式绑定到页面的根元素 :not 排除某个选择器样式 :empty 使用该选择器来制定当元素内容为空白时使用样式...(默认匹配他们得是相同子元素) nth-of-type(odd)奇数和:nth-of-type(even)偶数:完美解决上面的问题 3.循环使用样式 :nth-child(n):选取每一行...css伪元素: 对元素特定内容进行操作,而不是描述状态 css3为了区分两者伪类使用单冒号,伪元素使用双冒号,但因为兼容问题现在大部分还是用单冒号 8.层级选择器 相邻兄弟选择器: li + li:...e)圆角: border-radius:5px; 如果有两个值:第一个值表示左上角、右下角;第二个值表示右上角、左下角。...如果有三个值:第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角。 f)盒子阴影: box-shadow:5px 5px 10px #f66; 添加多个阴影,用逗号隔开即可。

71310

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

在学习结构性伪类选择器之前,先了解2个概念:CSS伪类选择器和伪元素: 1、伪类选择器:CSS已经定义好选择器,不能随便取名 常用伪类选择器是使用在a元素上几种...,如a:link|a:visited|a:hover|a:active 2、伪元素选择器:并不是针对真正元素使用选择器,而是针对CSS已经定义好伪元素使用选择器 CSS中有如下四种伪元素选择器...: 1)first-line:为某个元素第一行文字使用样式; 2)first-letter:为某个元素文字首字母或第一个字使用样式; 3)before:...当某个元素子元素不单单是同一种类型子元素时,使用“E:nth-of-type(n)”选择器来定位于父元素某种类型子元素是非常方便和有用。...简单点理解就是选择元素第一个子元素,记住是子元素,而不是后代元素。 案例代码: <!

49410

jQuery :nth-of-type(n)选择器用法详解

p元素选择器选择到p元素指向父元素第n个类型为p子元素,而且与p是否是该父元素第n个子元素无关,比如父元素有3个子元素,分别是p、span和p,那么:nth-of-type(2)选择到第二个...p元素,而不是第二个子元素。...具体可参考下方实例代码。 重点提示:如果是selector是一个class选择器,那么:nth-of-type(n)匹配选择必须是class相同且元素类型也一致所有元素第n个元素!...第一个类型class为c子元素,因为下方实例,class为cdiv和class为c段落p都是各自div和p元素集合第一个元素,因此都会被选择: <div class="c"...(2)').css("font-size","2.3em"); }) 原文:[jQuery :nth-of-type(n)选择器 :nth-of-type(n)选择器语法](https

15221

CSS选择器详解

要使该属性生效,E 元素必须是某个元素子元素,E 父元素最高是 body,即 E 可以是 body 子元素 最重要是: E 必须是它兄弟元素第一个元素,换言之,E 必须是父元素第一个子元素... 列表项二 列表项三 列表项四 :nth-last-child(n) CSS3 E:nth-last-child...E:first-of-type { sRules } 匹配同类型第一个同级兄弟元素E 要使该属性生效,E元素必须是某个元素子元素,E父元素最高是html,即E可以是html子元素,也就是说E...(n) CSS3 E:nth-of-type(n) { sRules } 匹配同类型第n个同级兄弟元素E 要使该属性生效,E元素必须是某个元素子元素,E父元素最高是html,即E可以是html子元素...,也就是说E可以是body 该选择符总是能命中父元素第n个为E子元素,不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色,虽然该 p 元素为父元素第三个元素

2.8K40

如何使用纯 CSS 制作四子连珠游戏

有时候,预处理程序用于硬编码每个可能场景,比如 :checked 字符串和相邻兄弟选择器。 在本文中,我将介绍使用纯CSS 制作四子连珠游戏关键思想。...这些 checkbox 是直接兄弟类,所以如果选中第一个之后,可以使用 :checked 伪类和相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢?你可以隐藏第二个,但是怎么才能影响第一个呢?...其次,你不能基于计数器值在元素上应用 CSS 规则。 我使用二进制解决了第一个问题。计数器初始值设为 0 。当红色玩家选中 radio 按钮时,计数器加 1。...然后,检测一行有四子相连可以用以下方法:选择第一个红色 radio input 被选中一个列,然后再选择第一个红色 radio input 被选中相邻同胞列,重复两次。...诀窍不仅在 CSS ,而且在 HTML ,下一列必须是上一列创建嵌套结构单选按钮同胞元素。

1.9K20

【 前端相关 网页样式 】总结CSS3“伪类”与“伪元素”

直译过来就是:css引入伪类和伪元素概念是为了格式化文档树以外信息。也就是说,伪类和伪元素是用来修饰不在文档树部分,比如,一句话第一个字母,或者是列表第一个元素。...下面是一个简单html列表片段: 我是第一个 我是第二个 如果想要给第一项添加样式,可以在为第一个添加一个类,并在该类定义对应样式...8 :nth-of-type :nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型元素。 如下例,第二个 元素会变为橙色。...第一个元素中有文本节点,所以其背景不会变成黄色; 第二个元素中有一个空格,有空格则该元素不为空,所以其背景不会变成黄色; 第三个元素没有任何内容,所以其背景会变成黄色; 第四个元素只有一个注释...如下例,第一个input背景不会被设为黄色,第二个input背景会被设为黄色。

3K70

一日一技:包含元组列表,对第一个元素升序第二个元素降序

9, 3, 7, 4] a.sort() b = [2, 3, 1, 9, 3, 7, 4] c = sorted(b, reverse=True) 运行效果如下图所示: 我们也知道,Python元组是可以比较大小...它比较方法就是先对第一个元素比较,如果第一个元素相等,再比较第二个元素。...因此对包含元组列表也可以这样排序,例如: d = [(6, 5), (1, 3), (4, 7), (6, 4), (1, 8), (7, 9)] d.sort() 但现在问题来了,如果要对这个列表排序...,但是需要对元组第一个元素升序,第二个元素降序,应该怎么办呢?...例如对如下列表进行排序,按元组第一个元素升序,第二个元素降序: [(6, 'apple'), (1, 'google'), (4, 'future'), (6, 'zero'), (1, 'stand'

84210

CSS选择器详细介绍

CSS选择器用于选择你想要元素样式模式。 CSS列表示在CSS版本属性定义(CSS1,CSS2,或对CSS3)。...:hover a:hover 选择鼠标在链接上面时 1 :focus input:focus 选择具有焦点输入元素 2 :first-letter p:first-letter 选择每一个元素第一个字母...1 :first-line p:first-line 选择每一个元素第一行 1 :first-child p:first-child 指定只有当元素是其父级第一个子级样式。...="python"] 选择每一个src属性值包含子字符串"python"元素 3 :first-of-type p:first-of-type 选择每个p元素是其父级第一个p元素 3 :last-of-type...:nth-last-child(2) 选择每个p元素是其父级第二个子元素,从最后一个子项计数 3 :nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级第二个p元素

72320
领券