在上一篇文章的cssnth选择器叙述中,苏南大叔描述了nth-child系列选择器的用法。其注意事项就是:其作用范围优先级的问题。和:nth-child(n)相对应的是:nth-of-type(n),两个选择器的主要区别就是:限定条件优先级不同。

苏南大叔:如何理解css的nth-of-type选择器?和nth-child的区别在哪? - nth-of-type
如何理解css的nth-of-type选择器?和nth-child的区别在哪?(图8-1)

本文测试环境:chrome@78.0.3904.108mac。强烈建议先阅读nth-child()系列说明,链接见文末。

nth-of-type(even)、nth-of-type(2n)

序号偶数的元素

p:nth-of-type(even){
    background: orange;
}
p:nth-of-type(2n){
    background: orange;
}

苏南大叔:如何理解css的nth-of-type选择器?和nth-child的区别在哪? - nth-of-type-2n
如何理解css的nth-of-type选择器?和nth-child的区别在哪?(图8-5)

相关链接

总结

A:nth-child(n)A:nth-of-type(n)对比的话:

  • A可以是html标签,也可以是.class。但是对于#id,测试中,只有A:nth-child(n)生效,但是A:nth-of-type(n)并不生效。所以,type意义上,包括html标签,也可以是.class
  • 对于A:后面的条件BA:nth-child(n)的优先级是先BAA:nth-of-type(n)的优先级是先AB

更多css的相关文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css

本站的忠实读者小伙伴,正在阅读下面这些文章: