javascript - 使用 JS 覆盖 CSS 类

Question

我正在使用 Reveal JS。这是我要覆盖的 CSS:

.reveal section img {...

使用以下方法之一(或更好的方法)，如何使用 JS 覆盖它？

document.getElementById(image1).classList.add("red"); // I tried creating a CSS class called "red" but it doesn't overide the original
document.getElementById(image1).style.boxShadow = "red"; // this doesn't overide the original theme CSS

Answer 1

首先，使用 chrome 开发工具确保该类确实被添加到元素中。

如果正在添加但未应用样式，则您的问题可能源于 css specificity rules .

而不是像这样定义你的类:

.red {
  box-shadow: 5px 2px 2px red;
}

试试这个:

.reveal section img.red {
  box-shadow: 5px 2px 2px red;
}