javascript - 两个 CSS 类具有不同的边框颜色值，并且只有一个有效

Question

我正在尝试更改文本区域的边框颜色。为此，我使用了 jQuery。以前，我使用的是 .css("border-color","rgb(250,0,0)")，它运行良好。现在我被告知不要在 Javascript 中使用 CSS 而使用 Class。

所以我创建了一个类:

.redBorderColor{
    border-color:rgb(255,0,0);
}

在我使用的 jQuery 中:

.addClass("redBorderColor")

当我在浏览器中检查它时，我发现类名在textarea的类属性中，但边框颜色没有改变。我在 firebug 中看到了以下类，来自已经在元素中实现的 Pure CSS:

.pure-form select, .pure-form textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 3px #ddd inset;
    box-sizing: border-box;
    display: inline-block;
    padding: 0.5em 0.6em;
}

问题是，我希望实现我的新样式类，而不应考虑或忽略以前的样式类。截至目前，我的风格被 Firebug 切断了

Answer 1

首先注意错别字； redBorderClass 在你的 JS 代码中应该是 redBorderColor。

也就是说，您还需要使 redBorderColor CSS 类更加具体，以便它可以控制其他 CSS 样式。您可以使用 !important:

.redBorderColor {
    border-color: rgb(255, 0, 0) !important;
}

或者您可以使选择器更具体:

.pure-form textarea.redBorderColor {
    border-color: rgb(255, 0, 0);
}

请注意，后者是更好的做法。