选择器——:nth-child

最新推荐文章于 2025-08-14 13:53:23 发布

原创最新推荐文章于 2025-08-14 13:53:23 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #nth-child #选择器

css3 选择器专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS中nth-child选择器的基本用法及其效果展示。nth-child(n)选择器能够匹配父元素中的第n个子元素，n可以是数字、关键字或公式。通过示例代码演示了如何设置特定子元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次我们测试选择器——:nth-child

理论：

:nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式。

测试代码块

以body为直接父级的p元素
第一个p元素 
以div为直接父级

    第一个p元素
    第一个p元素   

以div为直接父级

    
    第一个p元素
    第二个p元素   
    第三个p元素

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Jener

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

利用CSS nth-child选择器实现高级列表样式

weixin_41455464的博客

06-29

235

没错，这就是列表的基本功能。咱们来聊聊CSS里一个神奇的小家伙，它就像一根魔法棒，能让你的列表瞬间变得生动活泼，不再是清一色的“排排坐，吃果果”。是一个非常强大且灵活的 CSS 选择器，它可以让我们轻松地实现各种复杂的列表样式。这就意味着，我们可以选择特定的子元素，也可以选择满足某种规律的子元素。记住，前端的世界是充满乐趣的，只要你敢于尝试，敢于创新，就能创造出无限可能！效果：列表中只有第三个列表项的文字会变成红色，其他的依然保持默认颜色。效果：列表中的前三个列表项的文字会变成蓝色并加粗，更加醒目。

nth-child的使用

胡世林的博客

05-02

1383

觉得这篇博客可能会帮到其他朋友之前在学习css3的使用，接触到了nth-child（）这一选择器，发现怎么也用不好，今天有空了，就去试了下，（只举一个例子）直接说吧，后代选择器：例子：.parent div:nth-child(1) 解说：--使用这个子类选择器的时候，需要注意，这是两个验证条件，是没有关系的必须满足第n个子元素是div的时候才可以触发，不是满足在他的子类

参与评论您还未登录，请先登录后发表或查看评论

CSS选择器

li_chun_can的博客

08-05

248

标签选择器 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。格式: 标签名称{ 属性:值; } 【注】： 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签。 2.标签选择器无论标签藏得多深都能选中。 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)。 id选择器作用: 根据指定的id名称找到对应的标签, 然后设置属性格式： #id名称{

css选择器:nth-child()的用法

丹

10-10

4460

:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。偶数标签:nth-child(2n) 奇数标签 :nth-child(2n-1) 选择从第6个开始的，直到最后:nth-child(n+6) 选择第1个到第6个 :nth-child(-n+6) 两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-child() 选择器 :nth-last-chil

css3描述伪类选择器 :nth-child(n) 和 :nth-of-type(n) 的区别，并举例说明

前端大白话

06-10

819

前端打工人的深夜调试，除了布洛芬和枸杞茶，最怕遇到什么？是写了个`:nth-child(odd)`想给列表奇数行换背景色，结果选中的元素和预期完全对不上；是面试被问`nth-child`和`nth-of-type`区别，支支吾吾说不清楚……今天咱们就用最接地气的比喻+超详细案例，把这对“孪生伪类”的区别一次性讲透，看完这篇，你不仅能避开选择器陷阱，还能和面试官唠明白背后的逻辑～

CSS——17. nth-child选择器2

weixin_63215361的博客

01-06

281

*选择的是li的父元素中的前6个li子元素(n=0时选中的是我爱学习6，n=1时选中的是我爱学习5，等等...)*//*选择的是li的父元素中的,从第3个开始，第10个结束的li子元素*//*选择的是li的父元素中的从第4个li子元素开始的所有li子元素*//*选择的是li的父元素中的,从1,4,7....li子元素*/

微信小程序——:nth-child等在小程序中使用

我是我

05-27

4464

Vue中，父组件列表引入每一个子组件元素的时候，可以在父组件的CSS文件中设置子组件的margin，可以通过样式穿透在父组件设置子组件:nth-child(2n)为0等，那么在小程序中是如何实现的呢？父组件： WXML <view class="getnotice-list"> <t-notice-item class="getnotice-list-item" wx:for="{{getnotice}}" wx:key="index" content="{{item}}"

CSS中的nth-child与nth-of-type选择器用法：精准选择元素

weixin_41455464的博客

06-25

587

通过今天的讲座，相信大家对nth-child和有了更深入的理解。这两个选择器虽然看起来相似，但在实际使用中有着明显的区别。nth-child更适合用于基于位置的选择，而则更适合用于基于类型的精确选择。最后，给大家留一个小练习：如何使用nth-child或来实现一个带有交替背景色的表格？试试看吧！希望今天的分享对你有所帮助，期待下次再见！?

html nthchild作用,详解CSS中:nth-child的用法

weixin_31129821的博客

06-18

4790

前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途：Tips：还用低版本的IE浏览器的哥们请绕过！:nth-child(2)选取第几个标签，“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090}:n...

子选择器：first-child和nth-last-child ——能不用js就用css

QUX轻博客

07-03

337

之前一直纠结一个问题：腾讯qq和微信发布图片的时候，1个图片时大图，2个图片并列排，3个图片单行并列并缩写...9个图片9宫格，这不用js肯定实现不了！但是，但...

less :nth-child选择最后一个元素

12-27

### 使用 `:nth-child` 伪类选择器选择最后一个元素为了使用 `:nth-child` 来选择父级下的最后一个特定类型的子元素，通常的做法并不是直接通过 `:nth-child(n)` 实现，因为这需要知道确切的数量。相反，`:last-...

:nth-child打包后多了一个:first-child的样式

03-08

当遇到CSS伪类选择器如`:nth-child`在打包后多出`:first-child`样式的情况时，可能的原因包括但不限于构建工具配置不当、浏览器缓存问题或是源码中存在的隐含依赖关系。 #### 构建工具配置检查确保所使用的构建...

nth-child

03-29

`:nth-child()` 是一个强大的 CSS 伪类选择器，用于基于其在父元素中的位置来选择特定的子元素。它的语法如下： ```css :nth-child(an+b) ``` 其中： - `a` 和 `b` 是整数值。 - `n` 表示变量（通常从0开始计算）...

not-nth-child

03-27

而 `:nth-child` 则是一个基于位置的伪类选择器，允许开发者通过索引来定位元素。两者可以结合起来实现更复杂的样式控制。 #### 使用 `:not(:nth-child())` 当需要应用样式到某些不满足特定顺序的位置上的子元素时...

Web第二次作业