nth-child和nth-of-type两个选择器的区别

- 日理万妓 2021-11-23 09:22 94阅读 0赞

# CSS3 :nth-child()  #

规定属于其父元素的第二个子元素的每个 p 的背景色：

>     p:nth-child(2)
>     
>     {
>     background:#ff0000;
>     }

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    p:nth-child(2)
    {
    background:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    
    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### CSS3 :nth-of-type() ###

指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：

> p:nth-of-type(2)  
> \{  
> background:\#ff0000;  
> \}

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    p:nth-of-type(2)
    {
    	background:#ff0000;
    }
    </style>
    </head>
    <body>
    
    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 总结一下: ###

`p:nth-child(2)`

1.这个元素正好是父元素的第二个元素。2.这个值正好是p。那么选中

`p:nth-of-type(2)`

在父元素下面直接找第二个p元素

`nth-child`的关键词是child，它关心的是所有子元素。它会对所有子元素生效。**`ele:nth-child`的意义就是选择父元素下的第n个子元素，如果他是ele类型的，那么对他生效，如果他不是ele类型的，则不生效。**

`nth-of-type`的关键词是type，即他关心的是类型。它不会对所有子元素生效，只会对子元素中符合选择器要求的类型的子元素进行筛选，而忽略非选择器要求的类型的子元素。**`ele:nth-of-type(n)`的意义就是选择父元素下的第n个ele类型的子元素。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20211122/718de533332f4c5bba7b271f145bef70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20211122/d8afc25bedbe4f969f0136df0a0e82cc.png