1

I have a div that i have added a border style to. However when I try to add a CSS class to it the div style over rides it.

if ($("#input-whatmask").val() != '')
        {
            if(!searchReg.test($("#input-whatmask").val())){
                $("#input-whatmask").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
                hasError = true;
                return false;
            }
        }

Anyone confirm the correct way / method of doing this ?

4

3 回答 3

1

我确定您的问题是因为 css 样式优先级。id ( #input-whatmask) 的样式比 class ( .errorinput) 的样式更重要，所以什么都不会改变。要纠正这个问题，请将您的样式声明为，#input-whatmask.errorinput而不是只是.errorinput这样它将是首选（带类的 id 比 id 更具体）。

解释它是如何工作的（引用这篇很棒的文章）：

特异性是通过计算 css 的各种组件并以 (a,b,c,d) 的形式表达它们来计算的。举个例子会更清楚，但首先是组件。

  • 元素，伪元素：d = 1 – (0,0,0,1)
  • 类，伪类，属性：c = 1 – (0,0,1,0)
  • ID：b = 1 – (0,1,0,0)
  • 内联样式：a = 1 – (1,0,0,0)

id 比类更具体，比元素更具体。

于 2012-05-22T08:18:01.670 回答
0

div 标签中的样式，例如：

<div style="border: 1px solid blue;"></div>

将覆盖附加到 div 的类中的样式，例如，此 div 仍将具有蓝色边框：

<div class="myClass" style="border: 1px solid blue;"></div>

...

.myClass
{
    border: 1px solid red;
}

但是这个 div 会有一个红色边框：

<div class="myClass" style="border: 1px solid blue;"></div>

...

.myClass
{
    border: 1px solid red !important;
}

看到这个 js 小提琴：http: //jsfiddle.net/jtVRK/

于 2012-05-22T08:20:33.600 回答
0

你想要这样吗

if ($("#input-whatmask").val() != '')
{
    if(!searchReg.test($("#input-whatmask").val())){
        $("#input-whatmask").attr("class","errorinput").after('<span class="error">Enter a valid value.</span>');
        hasError = true;
        return false;
    }
}

如果您使用 attr() 而不是 addClass() 则样式将被覆盖。attr() 将 oldclass 名称更改为 newClass 名称， addClass() 只是将 newClass 添加到 oldClass。

or


用于!important必须在 newCalss 中使用相同代码覆盖的属性


or

if ($("#input-whatmask").val() != '')
    {
        if(!searchReg.test($("#input-whatmask").val())){
            $("#input-whatmask").removeClass("oldClass").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
            hasError = true;
            return false;
        }
    }
于 2012-05-22T09:56:02.153 回答