Question

<div class="commentList">
    <article class="comment " id="com21"></article>
    <article class="comment " id="com20"></article>
    <article class="comment " id="com19"></article>
</div>

任何想法为什么以下的最后一个子选择器对我不起作用？

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

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

因此，在这种情况下，#com19不应该在底部有边框和边距。我在这里做错了什么？

谢谢

Answer 1

看起来一切都是正确的 - 我创建了jsfiddle with last-child

问题出在其他地方 - “边界”的价值是多少？（这是php变量吗？）为确保您的陈述将被使用，您可以添加！important

Answer 2

您使用的浏览器是什么？

IE＆lt; 9 不会应用:last-child选择器样式。

Answer 3

我试图在Codepen中复制它，并遇到类似的问题。 https://codepen.io/Ukmasmu/pen/PoZOLNz

    <div class="commentList">
    <article class="comment " id="com21">
      a
    </article>
    <article class="comment " id="com20">
      b
    </article>
       <article class="comment " id="com19">
         c
       </article>
    <script></script>
    </div>

最后可能有一个不可见的元素。看起来它可能是一个像脚本标签之类的Element或其他不可见的NodeElement。检查DevTools是否存在这种可能性。

为了安全起见，您可以使用：last-of-type 伪元素！

CSS：最后一个子选择器不起作用？

3 个答案: