javascript - 仅对 div 中的最新输出行进行样式设置

Question

我有一个简单的应用程序，当在页面上执行某些操作时输出消息，它是通过 javascript createElement 函数完成的，我想做的是只为最新消息添加特殊样式，所以如果更新消息出现时，旧的最新消息将恢复为旧样式。有什么办法吗？当我 createElement 时，似乎所有 div 都必须具有相同的类，而我尝试的任何操作都只是将样式应用于所有消息。

那么在 CSS 中有什么东西可以让我只将样式应用于某个类的最新成员吗？

这是我创建新消息的方式

function selfMsg(message) {
    const msg = document.createElement('div');
    msg.style.cssText = 'display: flex; justify-content: flex-end;background-color:aquamarine';
    msg.innerText = message;
    display.append(msg);
}

但这一切所做的只是将所有 div 设置为相同的样式，我不知道如果出现更新的消息我应该如何删除样式。

理想情况下，我正在 CSS 中寻找可以在我的样式表文件中使用的东西，它可以针对整个类，例如“.classnamehere”的工作方式，但只将样式应用于该类的最新成员。

Answer 1

根据 div 所在的容器，您可以像这样使用 CSS last:child ( https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child):

所以如果你的容器有 display 类，你会这样做

.display div:last-child {
    display: flex; 
    justify-content: flex-end;
    background-color:aquamarine    
}

如果你不知道如何在 javascript 之外使用它，只需将上面的代码包装在 style 标签中并将其添加到你的 html 的 head文档。

出于清楚和可能即将发生的变化的原因，我强烈建议为您的所有 div 提供一个关于创建的类并使用它，而不仅仅是在 CSS 中使用 div。这样维护起来更容易。

.message-wrapper .message:last-child {
  color: red;
}

<div class="message-wrapper">
  <div class="message">Message 1</div>
  <div class="message">Message 2</div>
  <div class="message">Message 3</div>
</div>