使用 JavaScript 调整按钮样式会使 CSS :active 事件变得无用

Question

我正在用 HTML、JavaScript 和 CSS 制作一个外观基本的 Simon 克隆，我最近编写了一个名为displayShine(color)的函数，它就是这样做的：当被调用时，让我们说红色，它使预期的 div 闪烁大box-shadow: 0px 0px 100px red 。 这是 JavaScript 函数的样子：

function displayShine(color) {
    var toShine = document.getElementById(color);
    var hexValue;
    var secondaryHexValue;

    if (color == "red") { hexValue = "#e74c3c"; secondaryHexValue = "#c0392b"; }
    else if (color == "yellow") { hexValue = "#f1c40f"; secondaryHexValue =    "#f39c12"; }
    else if (color == "green") {hexValue = "#2ecc71"; secondaryHexValue = "#27ae60"; }
    else if (color == "blue") {hexValue = "#3498db"; secondaryHexValue = "#2980b9"; }
    else { hexValue = "#000000"; }

    finalString = ("3px 3px 0px " + secondaryHexValue + 
                           ", 2px 2px 0px " + secondaryHexValue + 
                           ", 1px 1px 0px " + secondaryHexValue + 
                           ", 0px 0px 100px " + hexValue)

    toShine.style.boxShadow = finalString;

    setTimeout(function() {
        toShine.style.boxShadow = ("6px 6px 0px " + secondaryHexValue + 
                               ", 5px 5px 0px " + secondaryHexValue + 
                               ", 4px 4px 0px " + secondaryHexValue + 
                               ", 3px 3px 0px " + secondaryHexValue + 
                               ", 2px 2px 0px " + secondaryHexValue + 
                               ", 1px 1px 0px " + secondaryHexValue);
    }, 500);
}

我也有 #red:active 的 CSS，当用户手动按下按钮时，它会以相同的大box-shadow: 0px 0px 100px red 。 这就是 CSS 的样子（每种颜色都一样，只是十六进制值不同）：

#red {
    background-color: #e74c3c;
    box-shadow: 6px 6px 0px #c0392b,
                5px 5px 0px #c0392b,
                4px 4px 0px #c0392b,
                3px 3px 0px #c0392b,
                2px 2px 0px #c0392b,
                1px 1px 0px #c0392b;
}

#red:active {
    box-shadow: 3px 3px 0px #c0392b,
                2px 2px 0px #c0392b,
                1px 1px 0px #c0392b,
                0px 0px 100px #e74c3c;
}

基本上，CSS 工作得很好，当按钮被点击时，它会产生一些被压抑然后又回来的动画，以及发光然后不发光，或者你想怎么称呼它。 我唯一的问题是，一旦我使用任何颜色作为参数调用一些displayShine()函数，该特定元素就不再按照我希望的方式在#red:active或其他任何内容上#red:active动画。 它在不活动时看起来仍然正确，并且:hover事件（它是用一个类而不是一个 id 完成的，所以我只需要为所有四个 Simon 彩色按钮编写一次）也完美地工作。 唯一的问题是当它处于活动状态时，在这种情况下它默认为标准的#red CSS。

任何人都知道发生了什么？ 任何帮助表示赞赏，如果有人想要，我可以包含更多代码。

Answer 1

内联样式（ style.foo属性映射到的样式）在级联中具有最高的优先级，因此无论选择器是什么，都将覆盖样式表中的任何内容。

在样式表中定义颜色，并通过修改元素所属的类来应用它们。