Question

好的，我有一个使用以下css为边框着色的表单：

input[type="text"] {
    border: 1px solid #ccc;
}

我遇到的问题是使用另一个css类更改边框颜色。如果我使用以下内容，我可以更改边框$("#div").css("border", "1px solid green");，但如果我尝试通过$("#div").addClass("good");向其添加另一个类，则不会更改边框。使用css类更改边框颜色的正确方法是什么？

谢谢，

Answer 1

这个应该归结为css的特异性。有些事情有助于确保边框发生变化：

确保样式表中的.good {}低于表单元素的基本css
尝试为您的css .good类添加后代选择器以获取该标记类型：

.good input [type = text] { 边框：1px纯绿色; }
如果一切都失败了，请将!important添加到.good班级

Answer 2

您应该使用覆盖来强制应用样式：

.good { border-color: green !important; }

或

.good { border: 1px solid green !important; }

<强> DEMO

Answer 3

我会将样式保存在css中，如下所示：

.default {
    border: 1px solid #ccc;
}

.green {
    border: 1px solid green;
}

.red {
    border: 1px solid red;
}

.blue {
    border: 1px solid blue;
}

然后使用jquery，我将删除当前的类，并添加新的所需类。

$('input[type="text"]').attr('class', '').addClass(colors[i]);

看看这个小提琴：http://jsfiddle.net/joplomacedo/YnnE3/

Answer 4

我想你的风格如下：

input[type="text"]{
                    border: 1px solid #ccc;
                   } 
.good{
       border:1px solid red; 
     }

你的HTML就像这些..

<input type="text" id="div"/>

现在用jquery更改输入元素的边框颜色你必须这样做..

$('#div').addClass('good');

现在，如果您想再次更改输入元素的边框颜色，请执行以下操作..

$('#div').removeClass('good').addClass('green');

Answer 5

@Brian Vanderbusch在这个问题上得到了最接近的答案。这是CSS specificity问题。

组合标记/属性选择器（input [type =“text”]）将覆盖单个类选择器（.good）。 CSS有一堆规则可用于决定哪些选择器优先。

尽管使用！important修饰符是覆盖CSS特异性规则I'd be careful about using it的一种方法，因为您实际上是故意违反正常规则。这可能会产生意想不到的副作用，而其他开发人员以后可能难以理解。

在这种情况下，要为类选择器授予适当的特异性级别，只需将其与输入选择器组合即可。这样就足以覆盖标签/属性选择器。

我分叉@Joey的回答来演示如何使用标准选择器来做到这一点，并避免使用！important：

http://jsfiddle.net/5jX5d/

通过Jquery添加和删除边框

5 个答案: