这是一篇在实际使用过程中，对选择器及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一致。
