当前位置：首页 > Web前端 > CSS

css基础-nth-of-type

时间：2023-03-30 22:00:15 CSS

看下面的代码，如果你知道什么内容会输出红色，说明你的基础应该不错，反正我挺晕的（实事求是？）.

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

id:1---p1

id:2---div1

id:3---p2??

id:4---div2

id:5---p3

id:6---div3

id:7---p4

id:8---div4

id:9---p5

id:10---div5结果如下，不知道你说的对不对？这篇文章的目的就是了解这些小知识点，否则几年搬砖留下的“腰肌劳损”对不起我。nth-of-typeCSS伪类匹配文档树中在它之前有an+b-1个相同兄弟姐妹的元素，其中n为正数或零。简单来说，这个选择器匹配在相同兄弟位置匹配模式an+b的元素。还是一头雾水，我们来看几个例子：p:nth-of-type(2n+1)

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

id:1---p1

id:2---div1id:3---p2

id:4---div2id:5---p3

id:6---div3id:7---p4

id:8---div4id:9---p5

id:10---div5这个demo可能没有发现你自己的问题，毕竟如预期的那样展示了符合奇数规则的p-labels。.line:nth-of-type(2n+1)2n+1是取满足条件的奇数标签（我试过2n-1结果一样，如果错了请issue）上面的标签p换成了样式选择device.line，哪些符合条件呢？

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

id:1---p1

id:2---div1id:3---p2??

id:4---div2id:5---p3

id:6---div3id:7---p4

id:8---div4id:9---p5

id:10---div5本来以为会和上面的例子一样，按照.line取奇数行类似显示，结果不是。.line:nth-of-type(2n+1)其实就是根据元素类型做一个set，然后根据不同的set取满足奇数规则的显示。这解释了为什么同时显示p和div。而不是揉在一起来隔开展示空间。tips:注意nth-of-type的描述，同兄弟节点的元素.hello:nth-of-type(2n+1)为了证明上面例子的猜想，.hello选择器是用于区分，标签类别和伪类共同决定显示哪些。

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

id:1---p1

id:2---div1id:3---p2??

id:4---div2不显示id:5---p3

id:6---div3显示id:7---p4

id:8---div4id:9---div5注：id:3---p2??内容不显示；id:6---显示div3。两个内容标签都由.hello样式选择器选择。前面的id虽然符合奇数规则，但是标签p是第二个（偶数），所以没有输出红色。同理：虽然后面的id符合偶数规则，但是标签div是第三个（奇数），所以输出为红色。.line:nth-of-type(2)

`.line:nth-of-type(2)`

id:1---p1

id:2---div1id:3---p2??

id:4---div2id:5---p3

id:6---div3id:7---p4

id:8---div4id:9---p5

id:10---div5结合前面的例子，就知道为什么要显示这两行了。.line:nth-child(2)

`.line:nth-child(2)`

id:1---p1

id:2---div1id:3---p2??

id:4---div2id:5---p3

与nth-of-type不同，child是根据父节点匹配伪元素的元素，不会根据相同元素区分。最好的做法是使用，不管是:nth-of-type还是:nth-child，最好在前面加一个父类的选择器：selector:nth-of-type这样的好处是不会是由于缺乏控制“Property”导致样式影响到其他地方。如下：（.wrap-test只是为了区别其他demo）比如开发者本地要实现父标签.test-parent1，则父标签下的第三个p标签为粉色（.wrap-test.test-parent1:nth-child(3))，结果父标签.test-parent1丢失，导致.test-parent1和.test-parent2都被显示。

`无父修改`

id:1---p1

id:2---p2??

id:3---p3

id:4---p4

id:1---p1

id:2---p2??

id:3---p3

id:4---p4

供参考，我只是一个知识点的“处理器”。更多内容请参考原文链接，感谢原作者的贡献：:nth-of-typeMDNCSS3选择器：nth-??child和:nth-of-type的区别张新旭TheDifferenceBetween:nth-childand:nth-of-typecss-tricks关于我如果您觉得本文对您有帮助，请点赞或分享给更多渠道的朋友。也可以扫描二维码关注我的微信订阅号——【前端雨爸】，第一时间收到技术文章，下班后我会继续输出。最后，感谢您的阅读，您的支持是我写作最大的动力

上一篇：拓端数据tecdat：避开数据海洋的“暗礁”：识别用户异常行为

下一篇：阿里面试后对函数本质的理解

css基础-nth-of-type相关文章