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

nth-of-type(n)、nth-last-of-type(n)

nth-of-type(n)nth-last-of-type(n),基本注意事项如下:

  • n1开始计数,而不是从0开始计算。
  • nth-of-type(n),从前往后数,第N个某元素。
  • nth-last-of-type(n),从后往前数,第N个某元素。
  • 首要条件:需要符合冒号前面的某元素这个条件,这条限制,不可以是#id,但可以是.class
  • 次要条件:符合父元素的第n个子元素。
p:nth-of-type(1){
  background: red;
}
p:nth-last-of-type(1){
  background: black;
}

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

nth-of-type(n+2)、nth-last-of-type(n+2)

第2个开始,包括第二个。

p:nth-of-type(n+3){
    background: green;
} 
div:nth-last-of-type(n+2){
    background: rgb(243, 159, 4);
} 

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

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)

nth-of-type(odd)、nth-of-type(2n+1)

序号奇数数的元素

p:nth-of-type(odd){
    background: orange;
}
p:nth-of-type(2n+1){
    background: orange;
}

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

first-of-type、last-of-type

第一个,最后一个,注意没有()

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

type

支持.class,但不支持#id

.first:nth-of-type(1){
    background: #ffffff;
}
#last:nth-of-type(1){
    background: pink;
}

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

相关链接

总结

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

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