Question

我有一个简单的应用程序，当在页面上执行某些操作时会输出消息，并且通过javascript 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>

Answer 2

您可以使用：last-child伪选择器。像这样：

.display div:last-child{
  // your style
}

Answer 3

您可以像这样在邮件中添加一个类：

msg.classList.add("mystyle");

然后使用css选择器仅将样式应用于此类型的最后一个元素

div.mystyle:last-of-type {
    /* ... your styles */
}

这是来自w3schools的一个示例，您可以使用：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_last-of-type

如果要使用纯JavaScript，可以使用element.removeAttribute("style")或element.style.cssText = null，但是必须跟踪以前的消息元素，或获取所有消息并遍历它们，在添加最新元素之前从所有样式中删除样式。我建议只使用CSS。

Answer 4

这方面的事情关键是:last-child伪类

"use strict";
console.clear();

document.getElementById('add').addEventListener('click', e => {
  const target = document.getElementById('add-target')
  const div = document.createElement('div')
  const text = document.createTextNode(`#${target.querySelectorAll('div').length+1}`)
  div.appendChild(text)
  target.appendChild(div)
})

.container {
  width: 600px;
  margin: auto;
  border: 1px solid gray;
}
.container > div {
  --bg-in: lightgray;
  --bg-out: transparent;
  transition: background-color 1s;
  padding: 20px;
  font-family: sans-serif;
}
.container > div:not(:last-child) {
  border-bottom: 1px solid gray;
  -webkit-animation: anim-out 1s .3s both;
          animation: anim-out 1s .3s both;
}
.container > div:last-child {
  -webkit-animation: anim-in 1s both;
          animation: anim-in 1s both;
}

@-webkit-keyframes anim-in {
  from {
    background-color: var(--bg-out, white);
  }
  to {
    background-color: var(--bg-in, pink);
  }
}

@keyframes anim-in {
  from {
    background-color: var(--bg-out, white);
  }
  to {
    background-color: var(--bg-in, pink);
  }
}
@-webkit-keyframes anim-out {
  from {
    background-color: var(--bg-in, pink);
  }
  to {
    background-color: var(--bg-out, white);
  }
}
@keyframes anim-out {
  from {
    background-color: var(--bg-in, pink);
  }
  to {
    background-color: var(--bg-out, white);
  }
}

<button id="add">Add</button>
<div class="container" id="add-target">
  <div>#1</div>
  <div>#2</div>
  <div>#3</div>
</div>

或者（更复杂一点）通过animationend事件在一段时间后实施淡出

"use strict";
console.clear();

document.getElementById('add').addEventListener('click', e => {
  const target = document.getElementById('add-target')
  const div = document.createElement('div')
  div.classList.add('in')
  const text = document.createTextNode(`#${target.querySelectorAll('div').length+1}`)
  div.appendChild(text)
  target.appendChild(div)
})

document.addEventListener('animationend', e => {
  e.target.classList.add('out');
  e.target.classList.remove('in');
})

.container {
  width: 600px;
  margin: auto;
  border: 1px solid gray;
}
.container > div {
  --bg-in: lightgray;
  --bg-peak: gray;
  --bg-out: transparent;
  transition: background-color 1s;
  padding: 20px;
  font-family: sans-serif;
}
.container > div:not(:last-child) {
  border-bottom: 1px solid gray;
}
.container > div.out {
  -webkit-animation: anim-out 1s 5s both ease-out;
          animation: anim-out 1s 5s both ease-out;
}
.container > div.in {
  -webkit-animation: anim-in 1s both;
          animation: anim-in 1s both;
}

@-webkit-keyframes anim-in {
  0% {
    background-color: var(--bg-out, white);
  }
  25% {
    background-color: var(--bg-peak, black);
  }
  100% {
    background-color: var(--bg-in, pink);
  }
}

@keyframes anim-in {
  0% {
    background-color: var(--bg-out, white);
  }
  25% {
    background-color: var(--bg-peak, black);
  }
  100% {
    background-color: var(--bg-in, pink);
  }
}
@-webkit-keyframes anim-out {
  from {
    background-color: var(--bg-in, pink);
  }
  to {
    background-color: var(--bg-out, white);
  }
}
@keyframes anim-out {
  from {
    background-color: var(--bg-in, pink);
  }
  to {
    background-color: var(--bg-out, white);
  }
}

<button id="add">Add</button>
<div class="container" id="add-target">
  <div>#1</div>
  <div>#2</div>
  <div>#3</div>
</div>

仅设置div中最新的输出行

4 个答案: