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

更新日期: 2019-05-19阅读: 2.5k标签: 选择器

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/

下面是各种选择的结果

  1. div :first-of-type可以选中 标题1 和 段落1
  2. div h1:first-of-type可以选中 标题1
  3. div p:first-of-type可以选中 段落1
  4. div .h1:first-of-type 可以选中 标题1
  5. div .h2:first-of-type 未匹配
  6. div :first-child 可以选中 标题1
  7. div p:first-child 未匹配
  8. div h1:first-child `可以选中 标题1
  9. div .h1:first-child `可以选中 标题1
  10. div .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该如何实现呢,很可惜,这些方式不能满足,你只能通过其他方式来完成,比如~选择器

<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可以选中 标题2
  • div :only-child 匹配不到任何元素


小节

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

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


原文链接:https://xboxyan.codelabo.cn/post/css3-of-type-child/


链接: https://www.fly63.com/article/detial/3374

CSS3 target 选择器_:target伪类的使用

arget作为目标伪类选择器,是css3中的新特性之一。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

css兄弟选择器(+ 和 ~)的使用和区别

这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。

jquery的选择器有哪些?如何对元素取值和设置值

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作, Jquery 选择器包括:基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....

CSS中的focus-within伪类选择器

在CSS中 :focus-within 是一个伪类,CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

vue 选择器_实现scoped深度作用选择器

vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深,例如影响子组件

css 选择器符号

空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素

css选择器总结_30个CSS3选择器

总结30个CSS3选择器:*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。

css节点选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?

CSS选择器:nth-child()和:nth-of-type()的使用

今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。:nth-child()和:nth-of-type()的支持度,所有主流浏览器均支持:nth-child()和:nth-of-type()选择器,除了 IE8 及更早的版本。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!