动态选择 last-child 元素

Question

假设我们从一个 parent 开始，其中包含三个 child 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>

然后说我有以下 select 或者在我的 css 文件中：

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

我希望 selector 中的属性设置为最后一个 child 元素，该元素只有类 "card"、"post" , 和 "show"。一开始，这个 select 或 select 是我想要应用更改的元素，即 ID 为 "post3" 的 div。

但是，假设 child 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>

我期望 selector 到 select 并将更改应用于 ID 为 "post1" 的 child，尽管它没有。

是否有特定的 select 或使用它可以按我想要的方式工作？

Answer 1

首先，我看到您的选择器中有 .class。没有 class of class 的元素。你应该做这个 card.

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

Answer 2

看起来 CSS 是不可能的，但如果您想尝试 jQuery：

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

希望对您有所帮助。

动态选择 last-child 元素

Dynamically selecting the last-child element

html

javascript

css

jquery

webpage