css - 通过 CSS 动态改变跨度颜色

Question

我正在开发一个在 H3 元素中有一个 span block 的 Angular 应用程序。这个 span 元素在需要变绿时动态接收类 green。我希望以下 css 代码能够工作:

h3 span {
  background: #d2001b;
}
h3 span.green {
  background: #669900 !important;
}

然而，这总是使我的跨度 #d2001b。我做错了什么？

Answer 1

这是一个普通的 javascript 示例，您的 css 似乎是正确的，没有 !important 的事件。

确保没有其他 css 覆盖背景颜色。

span = document.querySelector('#myspan');

span.onclick = event => {
  span.classList.toggle('green');
}

完整示例 https://codepen.io/anon/pen/Ebyxwr