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

发布于 2024-12-02 18:39:56 字数 554 浏览 6 评论 0原文

<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 不应在底部有边框和边距。我在这里做错了什么？

谢谢

原文

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

Any idea why the following last-child selector won't work for me?

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

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

So in this case #com19 shouldn't have a border and a margin at the bottom.
What am I doing wrong here?

thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云之铃。 2024-12-09 18:39:56

看起来一切都是正确的 - 我已经创建了 jsfiddle 与最后一个孩子

问题出在其他地方 - 是什么“$border”的值？（是php变量吗？）
为了确保您的语句将被使用，您可以添加 !important

回复收藏 0 原文

稳稳的幸福 2024-12-09 18:39:56

您使用什么浏览器？

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

回复收藏 0 原文

徒留西风 2024-12-09 18:39:56

我尝试在 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>

可能有一个不可见的元素结束。看起来它可能是像脚本标签这样的元素或其他一些不可见的 NodeElement。检查 DevTools 是否有这种可能性。

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

I tried to replicate it in Codepen and had a similar Issue. 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>

Probably there is an invisible element at the end. It seems that it may be an Element like a script tag or some other NodeElement that's not visible. Check the DevTools for that possibility.

You could use the :last-of-type pseudo element to be safe!

回复收藏 0 原文

~没有更多了~