css-基础-nthoftype

jiezi

5 年前

看如下代码，如果你知道哪些内容会以红色输出，说明你应该有不错的基础，反正我是相当晕菜的（实事求是 ????）。

<h3><code>.line:nth-of-type(2n+1)</code></h3>
<style>
    .wrap-a .line:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap">
    <p class="line hello">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line hello">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line hello">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

结果如下，不知你是否正确？这篇的目的就是搞懂这些小知识点，不然对不起几年搬砖留下的“腰肌劳损”。

这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个 相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。

依旧混乎乎，还是结合几个例子看下：

<h3><code>p:nth-of-type(2n+1)</code></h3>
<style>
    .wrap p:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

这个 demo 可能发现不出自己的问题，毕竟符合预期显示了符合 奇数规则的 p 标签。

2n+1 是取 符合条件的奇数 标签（我试过 2n-1 也结果一致，如果不对请 issue ）

和上面不同，标签 p 换成了 样式选择器 .line，那哪些符合条件？

<h3><code>.line:nth-of-type(2n+1)</code></h3>
<style>
    .wrap-a .line:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap-a">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

原以为和上例一样，会类似按照 .line 取奇数行做显示，结果却不是。

其实 .line:nth-of-type(2n+1) 是按照元素类型做个集合，然后再根据不同的集合取符合奇数规则的显示。这就解释了为何 p 和 div 都有显示。而非揉在一起间隔显示。

tips: 注意 nth-of-type 的描述，相同兄弟节点的元素

为了证明上例的猜想，用了 .hello 选择器做区分，确认了 标签类别 和伪类共同决定哪些显示。

<h3><code>.hello:nth-of-type(2n+1)</code></h3>
<style>
    .wrap-b .hello:nth-of-type(2n + 1) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap-b">
    <p class="hello">id:1---p1</p>
    <div class="hello">id:2---div1</div>
    <p class="hello">id:3---p2</p>
    <!-- 虽 .hello 奇数，但 p 标签偶数。未显示 -->
    <div class="">id:4---div2 <span style="padding-left:10px"> 未显示 </span></div>
    <p class="hello">id:5---p3</p>
    <!-- 虽 .hello 偶数，但 div 标签奇数。显示 -->
    <div class="hello">id:6---div3 <span style="padding-left:10px"> 显示 </span></div>
    <p class="">id:7---p4</p>
    <div class="hello">id:8---div4</div>
    <div class="hello">id:9---div5</div>
</div>

注意：id:3—p2 内容没有显示；id:6—div3 显示了。

这两个内容所在标签都被 .hello 样式选择器选中。

前者 id 虽符合奇数规则，但标签 p 却是第二个（偶数），所以没有输出红色。

同理：后者 id 虽符合偶数规则，但标签 div 是第三个（奇数），所以输出红色。

<h3><code>.line:nth-of-type(2)</code></h3>
<style>
    .wrap-c .line:nth-of-type(2) {
        font-size: 16px;
        font-weight: bold;
        color: red;
    }
</style>
<div class="wrap-c">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
    <div class="line">id:6---div3</div>
    <p class="line">id:7---p4</p>
    <div class="line">id:8---div4</div>
    <p class="line">id:9---p5</p>
    <div class="line">id:10---div5</div>
</div>

结合之前例子，就能知道为何这两行显示。

<h3><code>.line:nth-child(2)</code></h3>
<style>
    .wrap-d .line:nth-child(2) {
        font-size: 16px;
        font-weight: bold;
        color: greenyellow;
    }
</style>
<div class="wrap-d">
    <p class="line">id:1---p1</p>
    <div class="line">id:2---div1</div>
    <p class="line">id:3---p2</p>
    <div class="line">id:4---div2</div>
    <p class="line">id:5---p3</p>
</div>

和 nth-of-type 不同，child 是根据父节点下，和伪元素匹配的元素，且不会按照相同元素 做区分。

在使用上，无论 :nth-of-type 还是 :nth-child 最好都在前面加个父类的选择器：

selector :nth-of-type

这样有个好处，不至于由于没控制好“分寸”导致样式影响到其他地方。

如下：（.wrap-test 只是因为区分其他 demo）比如开发者本地想实现父标签 .test-parent1 下第三个 p 标签显示粉色（.wrap-test .test-parent1 :nth-child(3)），结果遗漏了父标签 .test-parent1，导致 .test-parent1 和 .test-parent2 都做了显示。

<h3><code> 无父类修饰 </code></h3>
<style>
    .wrap-test :nth-child(3) {
        font-size: 16px;
        font-weight: bold;
        color: pink;
    }
</style>
<div class="wrap-test">
    <div class="test-parent1">
        <p>id:1---p1</p>
        <p>id:2---p2</p>
        <p>id:3---p3</p>
        <p>id:4---p4</p>
    </div>
    <div class="test-parent2">
        <p>id:1---p1</p>
        <p>id:2---p2</p>
        <p>id:3---p3</p>
        <p>id:4---p4</p>
    </div>
</div>

我只是知识点的“加工者”，更多内容请查阅原文链接，同时感谢原作者的付出：

:nth-of-type MDN
CSS3 选择器:nth-child 和:nth-of-type 之间的差异张鑫旭
The Difference Between :nth-child and :nth-of-type css-tricks

如果你觉得这篇文章对你有帮助，请点个赞或者分享给更多的道友。

也可以扫码关注我的 微信订阅号 – [前端雨爸 ]，第一时间收到技术文章，工作之余我会持续输出

最后感谢阅读，你们的支持是我写作的最大动力

css-基础-nthoftype

nth-of-type

p:nth-of-type(2n+1)

.line:nth-of-type(2n+1)

.hello:nth-of-type(2n+1)

.line:nth-of-type(2)

.line:nth-child(2)

最佳实践

参考

关于我