动态选择最后一个子元素

Question

假设我从一个有三个孩子div的父母开始，如下所示：

<div class="leftcolumn">
            <div id="post2" class="card post show"></div>
            <div id="post1" class="card post show"></div>
            <div id="post3" class="card post show"></div>
</div>

说我的css文件中有以下选择器：

.card.post.show:last-child{
   outline: 10px solid black;
}

我希望将选择器中的属性设置为仅具有“ card”，“ post”和“ show”类的最后一个子元素。首先，此选择器选择我要应用更改的元素，即ID为“ post3”的div。

但是，说孩子div的类是这样改变的：

<div class="leftcolumn">
            <div id="post2" class="card post show"></div>
            <div id="post1" class="card post show"></div>
            <div id="post3" class="card post"></div>
</div>

我希望选择器可以选择并将更改应用于ID为“ post1”的孩子，尽管不是。

是否有可以使用的特定选择器？

Answer 1

首先，我可以看到您的选择器中有.class。没有class中class的元素。您应该制作这个card。

我认为您的建议与普通的CSS选择器无关，您可能必须使用JavaScript或其他客户端脚本语言。

Answer 2

看起来CSS不可能实现，但是如果您想尝试一下jQuery：

$('.card.post.show').last().css("outline", "10px solid black");

希望有帮助。