0

我知道我的标题有点混乱，也许有人可以提出不同的建议。

所以无论如何，我正在学习一些 Jquery，我想用它来进行表单验证，我会展示代码然后问这个问题。

形式：

<form action="" method="POST">
    <ul>
        <li>
            <label for="market_1">Market: </label>
            <input type="text" name="market_1" id="market_1" />
        </li>
   </ul>
</form>

JS：

$(document).ready(function()
{
    $("#market_1").addClass("text_box_error");
});

CSS：

input[type="text"]
{
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #5B5B5B;
    width: 148px;
}

input[type="text"]:hover, input[type="text"]:focus 
{
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #5B5B5B;
    font-weight: bold;
}
.text_box_error 
{
    background-color: red;
}

目前，我只是想让它在单击提交按钮时改变颜色。现在我可以让它工作，但是当我input[type="text"]用来设置输入框的样式时我不能让它工作。

我想通过这样做，我可以将所有输入框的样式设置为相同，然后使用 jquery addClass 方法我可以覆盖背景颜色。

那么，为什么这不适用于我向您展示的设置？

编辑：对不起，我已经更新了代码并在这里粘贴了错误的版本，我没有更新代码。

4

3 回答 3

3

这与选择器特异性有关。

选择器input[type="text"]包含一个元素名称并引用一个属性，因此它的特殊性为0,0,1,1.

然而，选择器.text_box_error仅包含一个（类）属性，因此它具有特定性0,0,1,0- 因此它background-color会被具有更高特定性的另一个选择器覆盖。

只需input[type="text"].text_box_error用作选择器——它将具有特定性0,0,2,1，因此将“赢得”第一个选择器。

于 2013-03-26T14:46:14.407 回答
1

将您的 CSS 更改为：

input[type="text"].text_box_error
{
    background-color: red;
}

input[type="text"].text_box_error:hover
{
    background-color: rgba(255, 0, 0, .5);
}

当文本框有错误和没有错误时，您可以正确设置两种情况的样式。

JSFiddle在这里：http: //jsfiddle.net/5KjVC/

于 2013-03-26T14:55:51.807 回答
1

这个选择器正在寻找类为 的元素input_boxes，但您的 HTML 中没有此类名称的元素。

$(".input_boxes")
于 2013-03-26T14:36:21.570 回答