原创投稿
  1. 创想鸟首页
  2. 用户投稿

CSS选择器中nth-child与nth-of-type的区别_nth选择器高阶用法

程序猿 • • 用户投稿

nth-child按所有子元素排序，nth-of-type按同类型标签排序；例如p:nth-child(2)选父元素第2个子元素且为p，而p:nth-of-type(2)选第2个p标签，忽略其他类型兄弟元素。

css选择器中nth-child与nth-of-type的区别_nth选择器高阶用法

在CSS中，nth-child 和 nth-of-type 都用于选择特定位置的子元素，但它们的判断逻辑完全不同，容易混淆。理解它们的区别以及高阶用法，能让你更精准地控制样式。

nth-child：基于父元素的所有子元素排序

nth-child 会把父元素下的所有子元素统一计数，不管类型是否相同。只要目标元素在第n个位置上，就会被选中。

例如：

p:nth-child(2) 表示：父元素的第二个子元素，且它必须是

标签才会匹配。如果第二个子元素是

，即使它是段落的“兄弟”，也不会被选中。

举个例子：

立即学习“前端免费学习笔记（深入）”；

  
标题
  
第一个段落
    
第二个段落

使用 p:nth-child(2) 能选中“第一个段落”，因为它正好是父元素的第二个子元素。

nth-of-type：基于同类型标签的排序

nth-of-type 只对指定类型的标签单独计数。它会忽略其他类型的兄弟元素，只看当前标签类型的第几个。

Fireflies.ai Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

Fireflies.ai 145 查看详情 Fireflies.ai

继续上面的例子：

p:nth-of-type(1) 选中第一个

元素（即“第一个段落”）。p:nth-of-type(2) 选中第二个

元素（即“第二个段落”）。

哪怕前面有

，p 的类型计数是独立的。

常见误区对比

假设HTML结构如下：

  
段落1
  
盒子1
  
段落2
  
段落3

p:nth-child(1)：匹配第一个

，因为它是第一个子元素。p:nth-child(2)：不匹配任何元素，第二个子元素是

，不是 p。p:nth-of-type(2)：匹配“段落2”，它是第2个 p 标签。p:nth-of-type(3)：匹配“段落3”。

nth选择器的高阶用法

CSS的 nth 系列支持数学表达式和关键词，非常灵活。

:nth-child(2n)：选择偶数位元素（2, 4, 6…），常用于隔行变色。:nth-child(2n+1)：选择奇数位元素（1, 3, 5…）。:nth-child(n+4)：从第4个开始的所有子元素。:nth-child(-n+3)：只选前3个子元素。:nth-of-type(3n)：每3个同类型元素中的最后一个。

还可以结合关键词：

:first-child 等价于 :nth-child(1):last-child 等价于 :nth-last-child(1):nth-of-type(even) 和 (odd) 支持直接写奇偶。

基本上就这些。关键在于搞清“按所有子元素排”还是“按同类标签排”。用错选择器可能导致样式不生效，调试时要特别注意DOM结构。

以上就是CSS选择器中nth-child与nth-of-type的区别_nth选择器高阶用法的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/969599.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
iQOO 13 手机采用单层主板、全新散热架构和 VC 散热板，蓝厂旗舰同款主摄、广角、算法
上一篇 2025年12月1日 19:42:07
Java项目中如何实现用户注销与自动登录功能_Cookie与Session解析
下一篇 2025年12月1日 19:42:09

相关推荐

  • 动态表单输入中多答案数据处理教程 用户投稿

    动态表单输入中多答案数据处理教程

    本教程旨在解决Web开发中，如何高效处理包含动态数量答案的表单提交数据，特别是当需要更新现有问题及其关联答案时。文章将详细阐述前端表单的命名策略以及后端PHP如何解析这些动态输入，以准确获取答案内容及其对应的数据库ID，从而实现数据的精准更新，并提供最佳实践建议。 理解动态答案更新的挑战 在构建问答…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • 苹果15换屏幕费用是多少 用户投稿

    苹果15换屏幕费用是多少

    官方维修费用：品质与保障的代价 苹果官方售后以其高标准的服务和原装零部件著称。针对iPhone 15的屏幕更换，官方定价普遍处于1000元至2000元区间，具体费用会因机型差异（如标准版与Pro版）以及所在城市而有所不同。这一价格不仅体现了苹果品牌的技术投入与服务保障，也确保了维修后的设备性能与出厂…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • 使用 PHP 解析 JSON 文件并在网页上显示特定数据 用户投稿

    使用 PHP 解析 JSON 文件并在网页上显示特定数据

    本文旨在帮助开发者学习如何使用 PHP 解析 JSON 文件，并提取其中的特定数据，将其以结构化的方式展示在网页上。我们将通过一个简单的示例，演示如何读取 JSON 数据，解析成 PHP 数组，并最终以 HTML 表格的形式呈现。 PHP 解析 JSON 数据 JSON (JavaScript Ob…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • Linux用户adduser与useradd命令区别 用户投稿

    Linux用户adduser与useradd命令区别

    adduser是交互式脚本，默认创建家目录并设密码，适用于Debian/Ubuntu；2. useradd是底层命令，需手动加参数创建家目录和Shell，通用性强，适合脚本使用。 在Linux系统中，adduser 和 useradd 都可以用来创建新用户，但它们在实现方式、使用习惯和功能上存在明显…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • 如何在PHP的require语句中传递参数并有效管理变量作用域 用户投稿

    如何在PHP的require语句中传递参数并有效管理变量作用域

    本文探讨了在php中使用`require`或`include`语句时如何向被引入文件传递参数。文章详细阐述了通过直接变量作用域共享、利用`$_get`超全局变量（不推荐）以及将引入文件内容封装为函数或类（推荐最佳实践）这三种方法，并提供了相应的代码示例，旨在帮助开发者理解和选择最适合其场景的参数传递…

    程序猿的头像 程序猿
    2026年9月24日
    000
  • PHP Web开发：高效处理动态数量问题答案的表单更新与ID获取 用户投稿

    PHP Web开发：高效处理动态数量问题答案的表单更新与ID获取

    本教程探讨在PHP Web开发中，如何高效处理具有动态数量答案的问题更新表单。针对需要同时获取答案文本值及其对应ID的场景，文章详细介绍了通过合理设计表单字段命名和利用$_POST超全局变量的键值迭代特性，实现对动态生成答案字段的准确解析和数据提取，确保更新操作的完整性。 问题背景与挑战 在开发问答…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • VSCode 怎样设置文件的自动命名规则 VSCode 文件自动命名规则的设置技巧​ 用户投稿

    VSCode 怎样设置文件的自动命名规则 VSCode 文件自动命名规则的设置技巧​

    vscode 本身不提供图形界面设置文件自动命名，但可通过配置 emmet.variables 和使用插件实现；2. 可在 settings.json 中添加如 “emmet.variables”: { “today”: “${tm_yea…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • phpMyAdmin快速导出文件字符集配置指南 用户投稿

    phpMyAdmin快速导出文件字符集配置指南

    本文详细介绍了phpMyAdmin快速导出功能中文件字符集的默认设置及其配置方法。默认情况下，快速导出生成的文件采用UTF-8编码。用户可以通过修改phpMyAdmin的配置文件config.inc.php，利用$cfg[‘Export’][‘charset&#8…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • PCIe 4.0和PCIe 5.0的固态硬盘，实际使用差别大吗？ 用户投稿

    PCIe 4.0和PCIe 5.0的固态硬盘，实际使用差别大吗？

    PCIe 5.0 SSD相比4.0在游戏加载中提升有限，仅快1-2秒且感知不强；但在视频剪辑、AI训练等生产力场景下，顺序读写速度提升近一倍，渲染和文件传输效率显著提高。 PCIe 4.0和5.0固态硬盘在实际使用中的差别，主要看你怎么用。对大多数普通用户来说，差距没想象中大；但如果你干的是专业活儿…

    程序猿的头像 程序猿
    2026年9月24日
    200
  • Laravel Blade中条件隐藏元素的优雅实践 用户投稿

    Laravel Blade中条件隐藏元素的优雅实践

    本文探讨了在Laravel Blade模板中如何高效地实现HTML元素的条件隐藏。针对传统@if-@else语句导致代码冗余的问题，教程提出使用Blade的内联三元运算符在style属性中动态控制display: none，从而避免重复代码，提升模板的可读性和维护性。此外，还将介绍如何利用CSS类和…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • 如何在mysql中使用数值函数计算 用户投稿

    如何在mysql中使用数值函数计算

    答案：MySQL数值函数用于执行数学运算，如ABS、ROUND、FLOOR、CEIL、MOD、POWER、SQRT等，可对数据直接计算。例如用ROUND四舍五入价格，TRUNCATE截断小数，FLOOR取整，MOD求余判断奇偶，SQRT开方，还可结合AVG、MAX等聚合函数使用，提升查询效率并减少应…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • PHP同页面无限次表单提交与显示：防止数据覆盖的实现技巧 用户投稿

    PHP同页面无限次表单提交与显示：防止数据覆盖的实现技巧

    本教程详细阐述了如何在php中实现同页面多次表单提交而不覆盖先前数据的方法。核心策略是利用html的数组命名输入（`name=”field[]”`）来收集多个值，并在每次页面刷新时，通过隐藏输入字段重新提交已有的数据，从而在不依赖数据库的情况下，实现“无限”次提交并显示所有历…

    程序猿的头像 程序猿
    2026年9月23日
    100

  • 一加R系列手机摄像头如何调整以拍出HDR视频？HDR视频的设置指南

    一加R系列手机摄像头如何调整以拍出HDR视频？HDR视频的设置指南一加R系列手机摄像头如何调整以拍出HDR视频？HDR视频的设置指南一加R系列手机摄像头如何调整以拍出HDR视频？HDR视频的设置指南一加R系列手机摄像头如何调整以拍出HDR视频？HDR视频的设置指南

    一加R系列拍摄HDR视频需开启相机中的HDR模式或选择4K等高分辨率视频模式，最佳光线为高对比度场景如日出日落，避免极暗或过亮环境，拍摄时启用防抖、使用三脚架以提升稳定性，并注意HDR视频具有更广动态范围和更高色深，但文件更大、对设备性能要求高，播放需支持HDR的设备以获得理想效果。 一加R系列手机…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    300
  • 使用 Dompdf 一键生成大量 PDF 文件的优化方案 用户投稿

    使用 Dompdf 一键生成大量 PDF 文件的优化方案

    本文旨在解决使用 Dompdf 生成大量 PDF 文件时遇到的超时问题。通过分析常见原因，提出了从Web服务器环境迁移到命令行环境，并配合 set_time_limit(0) 函数来避免执行超时，从而高效生成多个包含大量数据的 PDF 文件。 问题分析 从提供的代码片段可以看出，程序通过循环遍历 $…

    程序猿的头像 程序猿
    2026年9月23日
    600
  • 从单片机到ARM Linux驱动——Linux驱动入门篇 用户投稿

    从单片机到ARM Linux驱动——Linux驱动入门篇

    大家好，又见面了，我是你们的朋友全栈君。 嵌入式Linux操作系统具有：开放源码、所需容量小（最小的安装大约需要2MB）、不需著作权费用、成熟与稳定（经历这些年的发展与使用）、良好的支持等特点。因此被广泛应用于移动电话、个人数码等产品中。嵌入式Linux开发主要包括：底层驱动、操作系统内核、应用开发…

    程序猿的头像 程序猿
    2026年9月23日
    100

  • 如何在PaintShopPro中使用AI裁剪图片？快速掌握图像裁剪技巧

    如何在PaintShopPro中使用AI裁剪图片？快速掌握图像裁剪技巧如何在PaintShopPro中使用AI裁剪图片？快速掌握图像裁剪技巧如何在PaintShopPro中使用AI裁剪图片？快速掌握图像裁剪技巧如何在PaintShopPro中使用AI裁剪图片？快速掌握图像裁剪技巧

    PaintShop Pro虽无“AI裁剪”按钮，但可通过智能选择工具（如智能选择画笔、魔术棒）精准分离主体，结合内容感知填充实现背景移除或扩展，最终用裁剪工具优化构图，形成“先智能处理、后精准裁剪”的高效工作流。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    700
  • 快手直播什么标题吸引人？新人主播最牛的标题 用户投稿

    快手直播什么标题吸引人？新人主播最牛的标题

    直播行业已经成为我国互联网产业中不可或缺的一部分。其中，快手直播凭借其鲜明的平台特色和庞大的用户群体，吸引了众多观众的目光。在竞争日益激烈的直播市场中，如何通过一个引人注目的标题吸引观众，成为每一位主播必须掌握的技巧。本文将为你揭示打造高人气直播的关键技巧，助你轻松吸引大量观众！ 一、标题的关键作用…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • PHP如何设置视频自动播放_PHP设置视频自动播放方法 用户投稿

    PHP如何设置视频自动播放_PHP设置视频自动播放方法

    答案：PHP通过生成含autoplay和muted属性的HTML5 video标签实现视频自动播放。具体描述：PHP动态输出视频路径与播放设置，结合autoplay、muted、controls等属性，在浏览器限制下提升自动播放成功率，尤其用于背景视频循环播放场景。 PHP 本身是服务器端语言，不能…

    程序猿的头像 程序猿
    2026年9月23日
    2200
  • MarkLogic搜索结果中total属性的计算机制解析 用户投稿

    MarkLogic搜索结果中total属性的计算机制解析

    MarkLogic搜索响应中的total属性表示匹配查询条件的文档总数估算值。这个值是通过search:search执行“非过滤搜索”（unfiltered search）并结合xdmp:estimate()函数计算得出的，主要依赖于MarkLogic的内部索引进行快速计数，而非逐一检查文档内容，从…

    程序猿的头像 程序猿
    2026年9月23日
    1300
  • 在PHP中将JSON数组值声明为变量 用户投稿

    在PHP中将JSON数组值声明为变量

    本文介绍了如何在PHP中从数据库获取数据并将其编码为JSON数组，然后通过AJAX调用将其传递到另一个页面。重点讲解了如何在接收数据的页面中解析JSON数据，并将JSON数组中的特定值提取为PHP变量，以便在后续的函数或查询中使用。 从数据库获取数据并编码为JSON 首先，我们需要从数据库中获取数据…

    程序猿的头像 程序猿
    2026年9月23日
    1200

发表回复

登录后才能评论
关注微信