[CSS3] :nth-child() / :nth-of-type() 相关选择器

﹏ヽ暗。殇╰゛Y 2023-06-10 06:28 78阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]

### 文章目录 ###

*   *   *   *  一、:nth-child() / :nth-of-type()的区别
             *  二、括号中怎么写 - \`\{ an + b; n = 0, 1, 2, ...\} \`
             *  三、常见需求
             *   *  1. 第一个
                 *  2. 前3个
                 *  3. 前3个之后
                 *  4. 最后一个
                 *  5. 后3个
                 *  6. 后3个之前

#### 一、:nth-child() / :nth-of-type()的区别 ####

虽然感觉nth-child用的更多，但是其实nth-of-type()理解起来更单纯，从type可见，该选择器强调“类型”：

p:nth-of-type(n){ }

表示：父元素下类型为p的子元素中的第n个。先筛出要求类型，然后选第几个。

而nth-child强调“子元素”：

p:nth-child(n){ }

表示：父元素下的第n个子元素，并且要求类型为p。先选出第几个，然后检查类型，如果类型不匹配，则选择失败。

#### 二、括号中怎么写 - `{ an + b; n = 0, 1, 2, ...}` ####

括号中可以填数值、关键词、an+b，归根到底其实都是an+b：

1.  数值：`p:nth-child(n){}`  
    直接填n，表示第n个，是省略an，直接写b的结果
2.  关键词：  
    (1) odd：`p:nth-child(odd){}`  
    第奇数个，相当于2n+1  
    (2) even：`p:nth-child(even){}`  
    第偶数个，相当于2n
3.  an+b：`p:nth-child(an+b){}`  
    匹配所有下标在集合 \{ an + b; n = 0, 1, 2, …\} 中的子元素

#### 三、常见需求 ####

##### 1. 第一个 #####

p:first-child { }
    p:nth-child(1) { }

##### 2. 前3个 #####

p:nth-child(-n+3) { }

选择3、2、1

##### 3. 前3个之后 #####

p:nth-child(n+4){ }

选择4、5、6…

##### 4. 最后一个 #####

p:last-child{ }
    p:nth-last-child(1){ }

##### 5. 后3个 #####

p:nth-last-child(-n+3){ }

选择倒数3、2、1

##### 6. 后3个之前 #####

p:nth-last-child(n+4){ }

选择倒数4、5、6…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]: /images/20230531/6eb059026fbd470d9e57aa7dde01a39b.png