nth-child与nth-of-type使用中对选择器的注意事项

这是一篇在实际使用过程中，对选择器及nth-child与nth-of-type注意事项的备忘。

首先，在css选择器中，有一个细节需要注意，就是选择父元素下的子元素后，父子元素之间是否有空格。

• 有空格的情况下，代表父元素下的子元素，

• 没有空格的情况下，代表选择了拥有两个类名的属性。

  
  
  

  举个栗子

以下是html

   

    1111
    22222
    3333
    4444
    555
    6666
    77777
    88888888
  

下面是css

.div1.extra{
  background:yellow;
}

.div1 .extra{
  text-decoration:underline;
}

结果：
第一个选择器选择的是拥有.div1和.extra两个class的元素，即外面包裹div元素，所以设置的黄色背景对所有的span都起作用；

第二个选择器.div1.extra选择的是.div1下的拥有.extra类的子元素，所有只有第1个和第5个匹配了。

image.png

---

同样的效果也会出现在我们应用nth-child和nth-of-type也是相同的。

• nth-child代表的是该元素的父元素下的第几个子元素。
  把他们看成一个家族，就是他的亲兄弟姐妹里的第几个。

举个栗子

    
11111
    
22222222
    
3333333
    
44444444
    
5555555
    
666666666666
  

ul :nth-child(2) {
  color: red;
}
/*ul后面有空格，空格后的是其子元素li，匹配的是li的父亲ul下的第2个孩子*/
--------------------------------------
li:nth-child(3){
  color: blue;
}
/*li后面没空格，匹配的是li的父亲ul，下的第3个孩子*/

结果如下：

image.png

• nth-of-type代表的是该元素的父元素下的第几个同类子元素。
  把他们看成一个家族，就是将亲兄弟姐妹先分组，比如男女分组，然后分别是男孩里的第几个、女孩里的第几个。

注意点还是和nth-child一致。

以上~~！