CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

    xiaoxiao2022-07-12  142

    CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

    初学者可能会比较容易混淆,这里可以分一下类

    *-of-type*-child:first-of-type:first-child:last-of-type:last-child:nth-of-type(n):nth-child(n):nth-last-of-type(n):nth-last-child(n):only-of-type:only-child

    可以看出完全是一一对应,相信CSS开发者都对这些选择器的功能有个大致印象,比如first-*表示第一个,nth-*表示第几个,nth-last-*表示倒数第几个…

    *-of-type 和 *-child

    那么,-of-type和****-child 到底有什么区别呢?

    从字面上来看,其实就是type和child的区别,也就是说

    type表示类型,一类元素,比如都是p元素或者div元素

    child表示子元素,没有什么限制

    这样描述可能不直观,下面列举一个实例来说明

    :first-of-type 和 :first-child

    <div> <h1 class="h1">标题1</h1> <h1 class="h2">标题2</h1> <p class="p1">段落1</p> <p class="p2">段落2</p> </div>

    这里写了一个交互实例,可以随时比较各个选择器的结果https://codepen.io/xboxyan/

    下面是各种选择的结果

    div :first-of-type可以选中 标题1 和 段落1div h1:first-of-type可以选中 标题1div p:first-of-type可以选中 段落1div .h1:first-of-type 可以选中 标题1div .h2:first-of-type 未匹配div :first-child 可以选中 标题1div p:first-child 未匹配div h1:first-child `可以选中 标题1div .h1:first-child `可以选中 标题1div .h2:first-child 未匹配

    这里有个容易出错的地方,比如div .h2:first-of-type,很多人以为会选择到第一个class为.h2的元素,其实不是的,这里可以这么来理解:

    首先,div .h2:first-of-type会查找.h2类名所对应的元素,这里是h1元素,所以:first-of-type会匹配第一个h1元素,也就是说,这里的class类名只是找到对应元素类型的作用。接下来结合起来看,第一个h1的元素的class并不是.h2,所以就无法匹配到。

    同样,div p:first-child也是同样的道理,:first-child会首先找第一个元素,然后发现第一个元素并不是p元素,所以也匹配不到

    由此可见,我们在用:first-of-type时,其实只需要带上标签名就可以了,比如div p:first-of-type,根本不需要带上类名,如果不加标签名,那么会选择每种类型元素的第一个(示例1)

    而用:first-child时,根本不需要带上任何标识,因为始终会匹配到第一个元素,否则加上别的条件就匹配不到了(当然特殊需求除外)。

    那么,如果想实现上述第一个.h2该如何实现呢,很可惜,这些方式不能满足,你只能通过其他方式来完成,比如~选择器

    为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:784783012 欢迎大家进群交流讨论,学习交流,共同进步。 当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。 但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。

    <div> <h1 class="h1">标题1</h1> <h1 class="h2">标题2</h1> <h1 class="h2">标题2</h1> <p class="p1">段落1</p> <p class="p2">段落2</p> </div>

    这种情况下,如何选择到第一个h1.h2呢?

    直接给答案

    .h2{ outline:2px solid red; } .h2~.h2{ outline:0; }

    意思就是先选中所有的.h2,然后排除掉兄弟节点的其他.h2https://codepen.io/xboxyan/

    理解上面几种选择器的规则,那么下面几类都是一样的了

    :last-of-type和:last-child

    这与:first-of-type 和 :first-child用法完全一致,表示最后一个,这里不做多讲解

    有一点注意的是,:first-child是CSS2的范畴,意味着在IE8也能使用,而last-child是CSS3的规范,在同时都能满足需求时,如果需要更好的兼容性,建议使用:first-child。

    一个很常见的场景,比如一个列表,列表的每一项都一条分割线,我们可以使用border来模拟,那么是上边框还是下边框呢,都可以满足需求

    li{ *** border-top:1px solid; } li:first-child{ border-top:0; }

    显然,使用上边框结合:first-child兼容性更好。

    :nth-of-type(n)和:nth-child(n)

    这类选择器主要是选择第n个元素,跟元素序号有关,注意这里的起始序号为1(和js略微不同)

    n可以是数字、关键词或公式。

    比如说p:nth-of-type(1)表示每个父级下第一个p元素,等同于p:first-of-type

    关键词可以选择odd和even,分别表示奇数和偶数,常见场景就是表格

    tr:nth-child(odd){ background:#ff0000; } tr:nth-child(even){ background:#0000ff; }

    n还可以使用公式an + b,常见场景是选择周期性的元素

    p:nth-child(3n+0){ background:#ff0000; }

    :nth-last-of-type(n)和:nth-last-child(n)

    与:nth-of-type(n)和:nth-child(n)基本一致,只是从后面开始计数

    结合:nth-last-child(n)与:first-child可以匹配出列表中不同元素数量的不同样式

    比如:nth-last-child(3):first-child表示从后往前数选中第3个子元素,同时也是第一个元素,那么就可以判断改列表中共有3个元素,结合兄弟选择器+和~可以对不同数量的子元素分别指定样式

    li:only-child { height: 100%; } /* 2个 */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) + li { width: 50%; height: 50%; } li:first-child:nth-last-child(2) + li { margin-left: auto; } /* 3个 */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 50%; height: 50%; }

    大家可以看看张鑫旭的这篇文章,算是一个比较实用的场景

    :only-of-type 和 :only-child

    这个是表示当只有一个元素,或者同类型元素只有一个的时候使用

    <div> <h1 class="h1">标题1</h1> <h1 class="h2">标题2</h1> <h1 class="h2">标题2</h1> <p class="p1">段落1</p> <span>文本</span> </div> div :only-of-type可以选中 标题2 文本div p:only-of-type可以选中 标题2div :only-child 匹配不到任何元素

    小节

    其实大家只要注意 ***-of-type 是选择相同类型的元素 、 *-child是选择子节点 **就好了,

    相信未来可能会出现更全面的选择器,比如nth-of-class(根据class来选择),nth-of-* (根据任意选择器来选择),还是期待一下吧~

    最新回复(0)