css选择器相关总结

此篇记录css选择器相关，后期会持续更新。

1. ele:nth-of-type() 和 ele:nth-child()选择器比较

不同点：
ele:nth-of-type(n)是指ele的父元素下第n个ele元素
ele:nth-child(n)是指ele的父元素下第n个子元素且这个元素为ele，若不是，则选择失败

相同点：
两者的值都可以是 数字，2n, 3n ..  old, even等值

<div class="wrap">
    <p>p</p>
    <h1 class="h1">h1</h1>
    <h1 class="h1">h1</h1>
  </div>

//h1元素的父元素下的第2个h1元素
h1:nth-of-type(2) {
  color: red;
}

//h1元素的父元素下的第2个子元素
h1:nth-child(2) {
  color: blue;
}

结果如下：