两个CSS类有不同的边框颜色值，只有一个工作

我想改变一个textarea的边框颜色。我已经使用jQuery来做到这一点。以前，我使用.css("border-color","rgb(250,0,0)")，它工作正常。现在我被告知不要在JavaScript中使用CSS并使用Class。两个CSS类有不同的边框颜色值，只有一个工作

所以我创建了一个名为类：

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

和jQuery中我使用：

.addClass("redBorderColor")

当我在浏览器中选中它，然后我发现类名称出现在文本区域的阶级属性，但边框颜色不会更改。我已经看到了萤火虫下面的类，从已经在工程中实现纯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; 
}

的问题是，我想我的新风格类中实现和以前的人都不应不考虑或忽略。截至目前，我的风格被萤火虫切断

来源

2015-05-07 fatherazrael

您的CSS类是'redBorderColor'，但是您添加'redBorderClass'，是一个错字？ – Zee

.addClass（“redBorder ** Color **”） – fcalderan

如果您使用类而不是内联，则新选择器必须至少与现有选择器一样具体，并在CSS中遵循它（如果等效），以便代替它。什么是初始样式选择器CSS，它在哪里？ ...但我现在看到你只是因为它的外观错了:) –

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

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

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

也可以使选择更具体：

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

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

来源

2015-05-07 08:58:58

这是错字有问题。对不起。我已纠正。谢谢。它为我工作。让我分析一下，如果它不在其他地方受到影响，那么我会标记它的答案:) – fatherazrael

没问题，很乐意提供帮助。 –

你有

.redBorderColor

，而你正在增加：

redBorderClass

问题在我看来是一个简单的拼写错误。你已经将你的CSS选择器定义为.redBorderColor，在这里你可以看到颜色。

当你用js/jquery添加类的时候，你已经使用了redBorderClass而不是redBorderColor。

来源

2015-05-07 08:59:02 Jai

如果您想忽略或不考虑以前的课程，那么请删除当前课程并添加您的课程。

.removeClass('pure-form').addClass("redBorderColor");

然后，把这个放到你的班级，以保持其他配置。

border-radius: 4px; 
box-shadow: 0 1px 3px #ddd inset; 
box-sizing: border-box; 
display: inline-block; 
padding: 0.5em 0.6em;

来源

2015-05-07 09:02:31

不寻常的删除当前的，而不是只覆盖样式。那样会要求所有其他样式从“纯粹形式”中复制 –

两个CSS类有不同的边框颜色值，只有一个工作

回答

相关问题