CSS上一个子选择器：选择特定类的最后一个元素，而不是父内部的最后一个子元素？

Z时代
2024-01-10
分类：问答

hello

我要选择#com19吗？

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}
.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

只要我div.something在commentList中还有另一个作为实际的最后一个孩子，那就行不通。在这种情况下是否可以使用last-

child选择器来选择的最后出现article.comment？

回答：

:last-child仅在有问题的元素是容器的最后一个子元素而不是特定类型的元素的最后一个元素时起作用。为此，你想要:last-of-type

根据@BoltClock的注释，这仅检查最后一个article元素，而不检查类为的最后一个元素.comment。

body {
  background: black;
}
.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}
.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
<div class="commentList">
  <article class="comment " id="com21"></article>
  <article class="comment " id="com20"></article>
  <article class="comment " id="com19"></article>
  <div class="something"> hello </div>
</div>