:nth-child 以位置为核心，选择父元素下第n个子元素且必须匹配指定标签；:nth-of-type 以类型顺序为核心，选择同标签中第n个。例如在混合子元素中，p:nth-child(2) 要求第二个子元素是p，而 p:nth-of-type(2) 只需是第二个p标签，无论整体位置。
:nth-of-type 和 :nth-child 都是 CSS 中的结构伪类，用于选择父元素下的特定子元素，但它们的匹配逻辑有本质区别。理解它们的不同，关键在于“选择依据是什么”。
:nth-child 以位置为中心
这个伪类关注的是：目标元素是否位于父元素的第几个子元素位置上，而不关心它本身的标签类型。
也就是说，:nth-child(n) 会从父元素的第一个子元素开始数，只要位置符合 n（可以是数字、公式或关键字），就选中该位置的元素，前提是这个元素存在且满足前面的元素类型条件（如果有指定）。
比如：p:nth-child(2) 表示：父元素的第二个子元素，并且它必须是一个
标签，才会被选中。 如果第二个子元素是
，这个选择器也不会命中任何元素。
:nth-of-type 以类型和顺序为中心
这个伪类关注的是：当前元素在其父元素中，是同类型标签中的第几个。它会忽略其他类型的兄弟元素，只统计相同标签的出现顺序。
稿定抠图
AI自动消除图片背景
76 查看详情
立即学习“前端免费学习笔记（深入）”；
换句话说，:nth-of-type(n) 会先筛选出所有同类型的兄弟元素（如所有
），然后从中选出第 n 个。
例如：p:nth-of-type(2) 表示：在所有
标签中，选择第二个出现的，不管它在父元素中整体排第几位。 即使前面有几个
，就会被选中。
实际对比示例
假设有如下 HTML 结构：
标题
第一段
辅助内容第二段
p:nth-child(2)：选中第一个
，因为它是父元素的第二个子元素，位置匹配。 p:nth-child(4)：不会选中第二个
，虽然它是第四个子元素，但 :nth-child(4) 要求第四个子元素是
，而这里第四个确实是
，所以能匹配。 p:nth-of-type(2)：选中第二个
，因为它是所有
中的第二个，无论位置如何。 p:nth-child(3)：无法匹配任何元素，因为第三个子元素是 ，不是
。
核心区别总结
:nth-child 看的是“位置” —— 第几个孩子，是不是我要的标签。 :nth-of-type 看的是“同类中的顺序” —— 同类标签中排第几。 当子元素类型混杂时，两者结果可能完全不同。基本上就这些，关键在于理解“child”是按位置算，“of-type”是按标签类型分组后再算顺序。
以上就是css伪类:nth-of-type与:nth-child有何不同的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022152.html
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
-
C++怎么实现Dijkstra最短路径算法_C++图论算法与邻接表实现
使用邻接表和优先队列实现Dijkstra算法，从源点出发，每次选取距离最短的未访问节点进行松弛，更新邻居距离，直至处理所有节点，得到单源最短路径。 在C++中实现Dijkstra最短路径算法，通常结合图论中的邻接表结构和优先队列来高效处理。该算法适用于带权有向或无向图，且权重非负的情况，能求出从一个…
-
C++怎么实现一个阻塞队列_C++多线程生产者-消费者模型的关键数据结构
阻塞队列通过std::queue、std::mutex和std::condition_variable实现线程安全的生产者-消费者模型，支持队列满时生产者阻塞、队列空时消费者阻塞，利用wait与notify机制实现高效同步。 阻塞队列是实现 C++ 多线程生产者-消费者模型的核心数据结构。它允许一个…
-
C++如何实现一个简单的实体组件系统(ECS)_C++游戏架构设计与ECS实现
ECS通过实体、组件、系统分离实现高效游戏架构：实体为唯一ID，组件存数据，系统处理逻辑，配合连续内存存储提升性能。 在C++游戏开发中，实体组件系统（Entity-Component-System，简称ECS）是一种高效、灵活的架构模式，特别适合需要处理大量动态对象的游戏场景。它通过将数据与行为分…
-
C++怎么实现一个Manacher算法_C++最长回文子串的高效解法
Manacher算法通过预处理统一奇偶回文，利用对称性和最右边界减少重复计算，以O(n)时间找到最长回文子串。 Manacher算法是解决最长回文子串问题的高效方法，时间复杂度为O(n)，优于暴力法和动态规划。C++中实现该算法的关键在于利用回文串的对称性，避免重复计算。 算法核心思想 Manach…
-
C++怎么用GDB调试程序_C++开发者必备的命令行调试工具GDB入门
GDB是C++调试核心工具，需用g++ -g编译生成调试信息，通过gdb ./program启动后可用run运行程序，break设置断点，next/step单步执行，print查看变量值，backtrace分析调用栈，结合watch监控变量变化，程序崩溃时用bt定位段错误源头。 调试是每个C++开发…
-
C++怎么调用Python脚本_C++混合编程与Pybind11入门
C++调用Python脚本可通过Python C API或Pybind11实现，后者更简洁安全。首先安装Pybind11，编写C++代码包含pybind11/embed.h和pybind11/eval.h头文件，使用py::scoped_interpreter启动解释器，通过py::exec执行Py…
-
C++中的std::pmr是什么_C++17中基于多态内存资源的可定制内存分配
std::pmr是C++17引入的多态内存资源工具，通过memory_resource接口实现可定制的内存分配策略。它支持池分配、区域分配等高效机制，核心组件包括polymorphic_allocator、synchronized_pool_resource、monotonic_buffer_res…
-
C++怎么进行代码静态分析_C++ Clang-Tidy与Cppcheck工具使用
Clang-Tidy和Cppcheck是C++静态分析常用工具，前者基于Clang，支持现代C++，用于检查编码规范与潜在缺陷；后者独立于编译器，擅长检测内存泄漏、数组越界等安全问题。两者可通过命令行或配置文件启用，支持项目级分析与CI集成，建议结合使用并融入开发流程以提升代码质量。 在C++开发中…
-
c++中如何获取当前时间_C++时间库使用方法
首先使用chrono库获取高精度时间戳，再结合ctime将时间点转换为本地时间并格式化输出年月日时分秒，最后也可直接用C风格函数分解时间成分，根据需求选择合适方法。 在C++中获取当前时间，可以使用标准库中的 chrono 和 ctime 模块。根据需求不同，可以选择高精度时间戳或格式化日期时间字符…
-
c++怎么使用ONNX Runtime来运行一个AI模型_C++与ONNX Runtime集成运行AI模型实践
首先配置ONNX Runtime环境并加载模型，然后创建会话、准备输入张量、执行推理并获取输出。具体包括：下载对应平台库文件，配置头文件和链接库路径；使用Ort::Env和Ort::Session初始化会话；根据模型输入形状创建Ort::Value张量，注意数据布局为行优先及CHW格式；调用Run方…
-
C++怎么使用C++20的协程(Coroutine)_C++异步编程模型与co_await详解
C++20引入协程支持，通过co_await、co_yield和co_return实现异步编程与生成器模式。协程为无栈协程，由编译器管理状态，需定义promise_type控制行为。co_await用于挂起等待异步操作完成，自定义awaitable类型需实现await_ready、await_sus…
-
C++23的std::flat_map是什么_C++基于有序向量的高速缓存友好型关联容器
flat_map是一种基于有序vector的缓存友好关联容器，使用连续内存存储键值对，通过二分查找实现查询，具有高缓存命中率、低内存开销和快速迭代的优势，适用于数据量适中、查找频繁且修改较少的场景，但插入删除性能较差，C++23未正式引入，需手动实现或借助第三方库。 std::flat_map 并不…
-
C++怎么实现一个简单的垃圾回收机制_C++智能指针与引用计数GC
C++中可通过智能指针模拟自动内存管理，std::shared_ptr基于引用计数实现对象生命周期管理，避免内存泄漏；循环引用问题可用std::weak_ptr解决；自定义SimplePtr可演示原理，但实际推荐使用标准库智能指针。 在C++中，虽然没有像Java或C#那样的自动垃圾回收机制（GC）…
-
c++中的ADL（依赖于参数的查找）规则是什么_c++中ADL(依赖于参数的查找)规则解析与示例
ADL（依赖于参数的查找）是C++中根据函数实参类型在对应命名空间查找未限定函数名称的机制。当调用如swap(a, b)这类无命名空间前缀的函数时，编译器会检查a、b的类型所属命名空间，并在其中搜索匹配函数。例如MyNS::MyClass对象调用swap会触发对MyNS中自定义swap的查找；同样，…
-
C++怎么使用C-Vulkan进行图形编程_C++现代图形API Vulkan的底层调用
使用C++调用Vulkan的C API进行图形编程需手动管理资源，核心步骤包括：创建VkInstance、选择GPU并创建逻辑设备、配置表面与交换链、构建渲染管线及提交命令缓冲，最终实现高效跨平台图形渲染。 使用C++调用C语言接口的Vulkan进行图形编程，本质上是通过C++调用Vulkan的原生…
-
C++如何使用智能指针unique_ptr_C++独占所有权的轻量级指针
unique_ptr是C++中独占所有权的智能指针，定义于头文件，通过移动语义实现资源管理，禁止拷贝但支持移动，确保同一时间仅一个指针拥有对象，析构时自动释放资源，防止内存泄漏，适用于RAII场景如pimpl模式、工厂函数等，相比shared_ptr无引用计数开销，性能更高。 在C++中，std::…
-
C++如何使用future和promise_C++11中实现异步操作与线程间通信
std::future和std::promise通过共享状态实现线程间通信，允许异步任务返回结果或异常。使用std::async可快速创建异步任务并获取future；手动创建时，promise调用set_value或set_exception设置结果，future通过get获取值或抛出异常，支持移动…
-
C++怎么理解RAII资源获取即初始化_C++核心编程思想与实践
RAII的核心是将资源生命周期绑定到对象生命周期，构造时获取资源、析构时释放，确保异常安全与资源不泄漏。 RAII（Resource Acquisition Is Initialization）是C++中一项核心编程思想，直译为“资源获取即初始化”。它并不是一个语法关键字，而是一种基于对象生命周期管…
-
C++怎么实现CRC32校验算法_C++数据校验与位运算技巧
答案是查表法和位运算可高效实现CRC32校验。通过预生成256项查找表，结合异或与移位操作，逐字节更新CRC值并最终取反，实现快速校验。代码以0x04C11DB7为多项式，利用(crc >> 24) ^ byte索引查表，(crc 实现CRC32校验算法在C++中通常有两种方式：查表法和…
-
C++中的标签分发(Tag Dispatching)是什么_C++模板元编程中根据类型特性选择函数重载的技术
标签分发通过类型标签在编译期选择函数重载，实现高效静态多态。1. 定义标签类型如std::true_type；2. 编写对应重载函数；3. 利用类型特征自动推导并分发。例如print函数根据std::is_pointer判断是否为指针类型，分别调用不同实现。STL中advance结合迭代器标签优化性…
