CSS :nth-of-type()伪类的应用场景

:nth-of-type() 伪类适用于特定标签组合且这些组合会不断重复的场景。在整个 HTML 中，这样的组合元素并不多见，较为典型的是“dt+dd”组合：

<dl>
   <dt>标题1</dt>
   <dd>内容1</dd>
   <dt>标题2</dt>
   <dd>内容2</dd>
</dl>

以及“details > summary”组合：

<details open>
   <summary>订单中心</summary>
   <a href>我的订单</a>
   <a href>我的活动</a>
   <a href>评价晒单</a>
   <a href>购物助手</a>
</details>

这段代码中的 <a> 元素就可以使用 :nth-of-type() 伪类进行匹配。

然后，在这里介绍一个实际项目开发中经常用到 :nth-of-type() 伪类的场景。例如，实现下图所示的列表布局，其中点击列表会有选中状态。


显然，这样的效果非常适合使用 :checked 伪类实现，且无须任何 JavaScript 代码就能实现交互，HTML 如下：

<div class="cs-box">
   <input id="list1" type="radio" name="list">
   <label for="list1" class="cs-li"></label>
   <input id="list2" type="radio" name="list">
   <label for="list2" class="cs-li"></label>
   <input id="list3" type="radio" name="list" checked>
   <label for="list3" class="cs-li"></label>
   <input id="list4" type="radio" name="list">
   <label for="list4" class="cs-li"></label>
   <input id="list5" type="radio" name="list">
   <label for="list5" class="cs-li"></label>
   <input id="list6" type="radio" name="list">
   <label for="list6" class="cs-li"></label>
</div>

此时就不能使用 :nth-child(5n) 伪类对边缘列表进行匹配了，因为还有平级的 input [type="radio"] 元素。此时需要使用 :nth-of-type(5n) 伪类进行匹配，CSS 示意代码如下：

.cs-li {
   float: left;
   width: calc((100% - 40px) / 5);
   margin-right: 10px;
   cursor: pointer;
}
:checked + .cs-li {
   box-shadow: 0 0 0 3px deepskyblue;
}
.cs-li:nth-of-type(5n) {
   margin-right: 0;
}

.cs-li:nth-of-type(5n) 的含义是所有类名是 .cs-li 的元素按照标签类型进行分组，然后匹配各个分组中索引值是 5 的倍数的元素。

在本例中.cs-li 元素都是 <label> 元素，和隐藏的单选框 <input> 元素正好区分开了，故能准确匹配。如果没有 :nth-of-type() 伪类，就要给每个列表组都嵌套一层标签，那样实现起来就麻烦了。