如何选择相同类的第一个和最后一个元素

发表于 | 更新于: | 分类于 | 阅读次数:

引言

项目中，使用

1
2
3
4
div:first-child // 父元素的第一个div元素
div:first-of-type // 父元素下的div元素中的第一个
div:last-child
div:last-of-type

四个伪类，选出第一个或最后一个元素，并赋予相应的样式。

但是遇到了一个问题，就是如果对一个class类使用伪类，会发生意想不到的效果。因为这些伪类的作用对象是元素(tag)而不是类(class)，所以如果相同的类却有不同的元素类型，会发生不同的效果。

使用last-of-type选择最后一个类

选择出父元素内的最后一个class为item的子元素。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <p class="item"></p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  margin-bottom: 20px;
}
.container .item {
  width: 100px;
  height: 10px;
  margin-bottom: 5px;
  background-color: #0f0;
}

.container .item:last-of-type {
  background-color: #f00;
}

代码中对最后的元素使用:last-of-type修饰改为红色，比较两个模块可以看出，当不同的元素拥有相同的类时，不同元素的最后一个都会变为红色，无法选出最后一个类。first也是类似。代码见：https://codepen.io/zxlg/pen/pBBjmJ

使用last-child选择最后一个类

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  margin-bottom: 20px;
}
.container .item {
  width: 100px;
  height: 10px;
  margin-bottom: 5px;
  background-color: #0f0;
}

.container .item:last-child {
  background-color: #f00;
}

代码中对最后的元素使用:last-child修饰改为红色，比较两个模块可以看出，当最后一个元素的类不是设定的类item, 则无法选出父元素内的子元素的最后一个类。first也是类似。代码见：https://codepen.io/zxlg/pen/ZZZWdP

可用的选择第一个类的方法

网上有类似的讨论，只能得到一个实现获取第一个类的方法。如上所示：

1
2
3
4
5
6
.A {
    // 所有.A元素
}
.A ~ .A {
    // 所有.A元素其前拥有兄弟元素.A
}

两个作用域相减，得到第一个.A的元素。

若想要实现选中某个类的最后一个，只能暂用js去实现较为稳妥。

参考文献

  1. CSS3选择器:nth-child和:nth-of-type之间的差异
  2. CSS selector for first element with class