不同输入类的css答案

【问题标题】：css on different input classes不同输入类的css
【发布时间】：2012-07-21 04:17:12
【问题描述】：

你好，我有以下问题：

我确实会检查我的表单是否有一些 php 错误消息。

如果没有错误，我只需设置我的 css 设置：

.wrapper #frame form fieldset ul input {
    color: #f23;
    font-size: 10px;
    height: 18px;
    padding-left: 5px;
    margin-top: 3px;
    outline:none;
}

还有我的焦点设置：

.wrapper #frame form fieldset ul input:focus{
    color:#fff;
    font-weight: bold;
    border: 2px solid #fff;
}

好的，现在我改变了这一行：

<input type="text" id="normal" name="1" value=""/>

添加错误类别：

<input class="err" type="text" id="normal" name="1" value=""/>

问题是我的设置只发生在输入字段上的班级详细信息，而不是我的焦点设置：

.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

因此，如果有人可以告诉我为什么这不起作用，我将不胜感激。非常感谢。

【问题讨论】：

标签： html css class error-handling settings

【解决方案1】：

您的 HTML 中有一个 error 类，而在您的 CSS 中，您已将该类设置为 err；如果您始终使用相同的名称（无论您选择哪个），它应该可以工作。

你的当前 HTML：

<input class="error" type="text" id="normal" name="1" value=""/>

...和 CSS：

.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

此外，在您的 CSS 中，您选择的是 input，它是具有 err 类名的元素的后代，而不是 input 元素具有该类名的元素。所以，你应该使用类似的东西：

<input class="err" type="text" id="normal" name="1" value=""/>

input.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
input.err:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

【讨论】：