css选择器中的子索引伪类使用，有关:last-child与:last-of-type的区分

这篇主要介绍的是子索引伪类的使用，减少js对样式逻辑的干涉，从而提高性能

:first-child与:last-child 匹配：第一个与最后一个的元素;

俩者的区别：first-child是IE7浏览器就开始支持，last-child是css3时代出现的，IE9浏览器才开始支持，所有优先使用:first-child

:only-child匹配：单独一个的元素；

单独的含义在于有无标签的兄弟元素，可存在无标签的文本的内容；例如：

.icon:only-child{} // 可匹配
<div>
	// 删除文本没有标签嵌套，是匿名文本不影响，可匹配；
	<i class='icon'></icon>删除
</div>

此伪类用在一些动态的生成step或列表都只有一项时，用于适配样式书写，这里介绍一个加载的例子书写如下：

/* CSS： */
.cs-loading {
    height: 150px;
    position: relative;
    text-align: center;
    /* 与截图无关，截图示意用 */
    border: 1px dotted;
}
/* 图片和文字同时存在时在中间留点间距 */
.cs-loading-img {
    width: 100px;
    margin-top: 45px;
    vertical-align: bottom;
}
.cs-loading-p {
    margin: .5em 0 0;
    color: gray;
}
/* 只有图片的时候居中绝对定位 */
.cs-loading-img:only-child {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}
/* 只有文字的时候行号近似垂直居中 */
.cs-loading-p:only-child {
    margin: 0;
    line-height: 150px;
}
</style>
<!-- 1. 只有加载图片 -->
<div class="cs-loading">
    <img src="./img/loading.gif" class="cs-loading-img">
</div>
<!-- 2. 只有加载文字 -->
<div class="cs-loading">
    <p class="cs-loading-p">正在加载中...</p>
</div>
<!-- 3. 加载图片和加载文字同时存在 -->
<div class="cs-loading">
    <img src="./img/loading.gif" class="cs-loading-img">
    <p class="cs-loading-p">正在加载中...</p>
</div>

效果如下图所示：

:nth-child() / nth-last-child()带参数的匹配(An + B);从前面/后面开始匹配

匹配类型的使用：
odd：匹配奇数的个数；
even：匹配偶数的个数；主要用于斑马线条纹表格的更改
An+B：A与B都是固定的整数；n可以有负号，小于1的计算都会被忽略；
一些使用的实例：

• li:nth-child(odd); 1,3,5,…行，等同于li:ntg-child(2n+1)
• li:nth-child(even); 2,4,6,…行，等同于li:ntg-child(2n)
• li:nth-child(3n + 4); 4,7,10,…行
• li:nth-child(-n + 3); 匹配前3行；-0+3=3, -1+3=2, -2+3=1;之后小于1都不生效-3+3= 0， -4+3=-1
• li:nth-child(n + 3):nth-child(-n + 10); 匹配3~10行；可用于匹配中间列表数据的样式的更改

这里介绍个动态列表数量匹配，直接是借助伪类判断当前列表的个数；

• li:only-child{ } // 列表只有一个
• li:first-child:nth-last-child(2) { } // 2个列表
• li:first-child:nth-last-child(3) { } // 3个列表
  其中， li:first-child:nth-last-child(2) 表示<li>元素既匹配第一个子元素，又匹配从后往前的第二个元素，因此就能判断当前总共有俩个<li>的元素,之后只需要配合相邻兄弟选择符（+）或（~）即可，例如：
• li:first-child:nth-last-child(3) { } // 3个项目，匹配第一项
• li:first-child:nth-last-child(3) { } + li { } // 3个项目，匹配第二项
• li:first-child:nth-last-child(3) { } ~ li { } // 3个项目，匹配第二项与第三项
• li:first-child:nth-last-child(3) { } ~ :last-child { } // 3个项目，匹配第三项

还有一个是匹配类型的子索引的伪类；这个区分类型的type使用

:first-of-type与:last-of-type;匹配：当前标签元素的第一个与最后一个

:only-of-type；匹配：当前标签元素单独一个

:nth-of-type与:nth--last-of-type；匹配：当前标签元素的匹配索引

这里的使用与前面所讲的:*-child类似

注:*-child与:*-of-type的区别在于是否是当前元素；

• :*-child主要适用的场景是列表中只有一个类型的标签元素；如ul-li的<li>列表
• :*-of-type主要适用的场景是列表中掺杂多种标签元素；如dd+dt的形式，或者有关多个重复span与p一起的形式
  注：两者的运用在项目中区别，在掺杂多个标签类型时会出现:*-child匹配不上的情况