在上一篇文章的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(n)

关于:nth-of-type(n)的注意事项:

  • 当前元素的父元素,属于某个类型的子元素中,第N个元素。
  • N是从1开始计算的,而不是从0开始计算的。

测试代码,基本上和:nth-child(n)的测试代码基本一致。如下所示:

<style>
div,p{
    width:36px;
    height:36px;
    margin:0px;
    padding:0px;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;
    float:left;
    margin-right:1px;
    border:1px solid gray;
    color:#fffff;
    font-weight: bold;
    background: gray;
}
</style>
<div class="first">d1</div>
<div>d2</div>
<p>p1</p>    
<p>p2</p>
<div>d3</div>
<p id="last">p3</p>
<p>p4</p>
p:nth-of-type(1){
    background: pink;
}
div:nth-of-type(1){
    background: green;
}

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

相关链接

总结

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

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