CSS选择器优先级以倍数形式计算权重，内联样式权重1000，ID选择器100，类/伪类/属性选择器10，元素/伪元素1，倍数越大优先级越高，决定样式冲突时的应用顺序，倍数选择器如nth-child(2n)匹配偶数元素、nth-child(3n+1)匹配特定倍数加1的元素，可高效批量控制结构化样式，两者结合既保障样式优先级清晰，又提升元素选择的精确性与代码效率。
CSS 结构伪类选择器：精准定位元素的序列艺术
在 CSS 的世界中，选择器是样式匹配的“钥匙”，而结构伪类选择器（如 `:nth-child()`、`:nth-of-type()` 等）则是这把钥匙中最精密的“狙击镜”——它通过数学级数般的精准算法，让我们能高效定位列表、表格、网格等有序结构中的特定元素，彻底告别繁琐的手动逐个设置，本文将从核心语法到实战场景，深入剖析 CSS 结构伪类选择器的强大用法。
核心选择器：`:nth-child(an+b)` —— 基于“绝对位置”的精准狙击
`:nth-child()` 是结构伪类选择器中最常用、最强大的成员之一，它根据父元素下所有子元素的**绝对位置**（从 1 开始计数）来匹配符合公式 `an + b` 的元素，理解这个公式是掌握其精髓的关键。
a：**步长**（整数，可为 0）；b：**偏移量**（整数，可为负）；n：**变量**（取所有自然数，即 0, 1, 2, 3…）。
语法拆解：从数学公式到实际匹配
-
当
a=0时：公式简化为 `b`，即精确选择第 `b` 个子元素（无论类型），`nth-child(3)` 匹配父元素下第 3 个子元素。<div class="parent"> <span>第1个</span> <!-- 不匹配 --> <p>第2个</p> <!-- 不匹配 --> <div>第3个</div> <!-- 匹配 --> </div>
.parent :nth-child(3) { color: red; } -
当
b=0时：公式简化为 `an`，即从第 `a` 个元素开始，每隔 `a-1` 个元素选一个（步长为 `a`），`nth-child(2n)` 匹配所有偶数位子元素（等同于 `:nth-child(even)`），`nth-child(3n)` 匹配第 3、6、9…个子元素。<ul> <li>1</li> <!-- 不匹配 (2n: 2,4,6...) --> <li>2</li> <!-- 匹配 --> <li>3</li> <!-- 不匹配 --> <li>4</li> <!-- 匹配 --> </ul>
li:nth-child(2n) { background: #f0f0f0; } -
当
a≠0且b≠0时：从第 `b` 个元素开始，每隔 `a-1` 个元素选一个，`nth-child(3n+1)` 匹配第 1、4、7…个子元素（`n=0` 时 1，`n=1` 时 4，`n=2` 时 7…），这是最灵活、最常用的模式。<ol> <li>1</li> <!-- 匹配 (3*0+1) --> <li>2</li> <!-- 不匹配 --> <li>3</li> <!-- 不匹配 --> <li>4</li> <!-- 匹配 (3*1+1) --> <li>5</li> <!-- 不匹配 --> <li>6</li> <!-- 不匹配 --> <li>7</li> <!-- 匹配 (3*2+1) --> </ol>
li:nth-child(3n+1) { font-weight: bold; }
便捷简写：`:even` 与 `:odd`
- `:nth-child(even)`：等同于 `:nth-child(2n)`，选择所有偶数位子元素；
- `:nth-child(odd)`：等同于 `:nth-child(2n+1)`，选择所有奇数位子元素。
/* 表格隔行变色 */ tr:nth-child(even) { background: #e8f4f8; }
进阶选择器：`:nth-of-type(an+b)` —— 基于“类型分组”的智能定位
`:nth-of-type()` 与 `:nth-child()` 语法完全相同（同样使用 `an + b` 公式），但**核心区别在于计数方式**：
