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

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

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

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

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

  
  举个栗子

以下是html

   <div class="div1 extra">
    <span class="span1 extra">1111</span>
    <span class="span1">22222</span>
    <span class="span1">3333</span>
    <span class="span1">4444</span>
    <span class="span1 extra">555</span>
    <span class="span1">6666</span>
    <span class="span1">77777</span>
    <span class="span1">88888888</span>
  </div>

下面是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代表的是该元素的父元素下的第几个子元素。
  把他们看成一个家族，就是他的亲兄弟姐妹里的第几个。

举个栗子

<ul>
    <li>11111</li>
    <li>22222222</li>
    <li>3333333</li>
    <li>44444444</li>
    <li>5555555</li>
    <li>666666666666</li>
  </ul>

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一致。

以上~~！