0

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

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

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

谢谢，

4

5 回答 5

1

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

  1. 确保样式表上的 .good {} 低于表单元素的基本 CSS

  2. 尝试.good为该标签类型添加一个后代选择器到您的 css 类中：

    .good input[type=text]{ 边框：1px 纯绿色；}

  3. 如果一切都失败了，请添加!important到您的.good班级

于 2012-07-08T16:31:22.940 回答
1

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

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

或者

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

演示

于 2012-07-08T16:32:12.143 回答
1

我会将样式保留在 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/

于 2012-07-08T17:23:12.333 回答
1

我想你在下面的风格是这样的..

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');
于 2012-07-08T19:10:39.803 回答
0

@Brian Vanderbusch 对此给出了最接近的答案。这是一个CSS 特异性问题。

组合的标签/属性选择器 (input[type="text"]) 覆盖了单个类选择器 (.good)。CSS 有一堆规则用于决定哪些选择器优先。

尽管使用 !important 修饰符是覆盖 CSS 特定性规则的一种方法，但我会小心使用它，因为您实际上是在故意破坏常规规则。这可能会产生意想不到的副作用，并且其他开发人员以后可能难以理解。

在这种情况下，要为您的类选择器授予适当级别的特异性，您只需将其与输入选择器结合起来。这给了它足够的权重来覆盖标签/属性选择器。

我分叉了@Joey 的答案，以演示如何使用标准选择器执行此操作，并避免！重要：

http://jsfiddle.net/5jX5d/

于 2012-09-18T17:54:46.390 回答