nth-of-type(n) 能给段落设颜色，但只对同类型兄弟元素计数，不包含非p元素；支持odd/even关键字，不兼容IE8；复合选择器中始终修饰紧邻的标签名，且受Shadow DOM作用域限制。
nth-of-type(n) 不能直接给段落设颜色？
它能，但必须满足前提：<p></p> 是其父容器中同级的第 n 个 <p></p> 元素。如果中间夹了 <h2></h2>、<div> 或注释节点，序号会跳过那些非 <code>p 元素——这是最常被误以为“失效”的原因。
常见错误现象：p:nth-of-type(2) 没生效，其实是第二个 <p></p> 前面有个 <h3></h3>，所以它其实是父元素里的第 3 个子元素，但仍是第 2 个 p，选择器本身没错。
- 只对同类型兄弟元素计数，不按所有子元素顺序排
- 不支持 IE8 及更早版本（但现代项目基本不用考虑）
- 若父容器里混用多种块级标签，
nth-of-type比nth-child更可靠
怎么让第 1/3/5 段文字变蓝，其余灰？
用 nth-of-type(odd) 最省事，它等价于 nth-of-type(2n+1)：
p:nth-of-type(odd) {
color: #1e90ff;
}
p:nth-of-type(even) {
color: #666;
}
注意：odd/even 是关键字，不是字符串，不能加引号；也不支持写成 2n-1 这种偏移形式（虽然语法合法，但可读性差且易错）。
立即学习“前端免费学习笔记（深入）”；
- 想单独控制某一段？直接写
p:nth-of-type(3)，别用:nth-child(3) - 如果段落是动态插入的（比如 Vue 渲染），确保父容器没额外包裹层干扰层级
- 避免和内联
style冲突：CSS 优先级高于style="color:..."，但低于!important
为什么加了 class 还要写 p:nth-of-type？
因为 .content p:nth-of-type(2) 和 .content:nth-of-type(2) p 完全是两回事。前者选的是「类为 content 的容器下，它的第二个
」；后者试图选「页面中第二个类为 content 的元素内部的所有
」——而 nth-of-type 对 div.content 不起作用，它只认元素类型（div、p 等），不认 class。
- 复合选择器里，
nth-of-type总是修饰紧挨着它的那个元素标签名 - 如果父容器是
<article class="post"></article>，就该写article.post p:nth-of-type(2) - 别偷懒写成
.post p:nth-of-type(2)——万一页面有其他.post容器（比如侧边栏），样式会意外泄漏
长文本换行、截断时 nth-of-type 还有效吗？
有效，但和换行无关。nth-of-type 只看 HTML 结构中的元素顺序，跟 CSS 的 white-space、line-clamp 或是否折行完全无关。不过容易踩的坑是：用 JS 动态切分长文本生成多个 <p></p> 时，若没清空旧节点或重复 append，会导致 DOM 中出现多余 p，序号就乱了。
- 用
console.log(container.children)快速验证实际子元素结构 - 服务端渲染或静态生成时，确保模板输出的
p是干净、连续、无空注释的 - 移动端 Safari 对
nth-of-type的解析极稳定，不必额外 hack
真正麻烦的是嵌套层级太深或用了 Web Components —— Shadow DOM 会截断选择器作用域，nth-of-type 只在当前 shadow root 内生效，这点很容易被忽略。
