如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？ [英] How can I select the last element with a specific class, not last child inside of parent?

问题描述

<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>

我要选择#com19？

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

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

只要我有另一个div.something作为commentList中实际的最后一个子级，这就不起作用。在这种情况下，是否可以使用最后一个子项选择器来选择article.comment的最后一个外观？

jsFiddle

推荐答案

:last-child仅当有问题的元素是容器的最后一个子级时才有效，而不是特定类型的元素的最后一个子级。为此，您需要:last-of-type

http://jsfiddle.net/C23g6/3/

根据@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>

这篇关于如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！