css在不同的输入类

Question

你好,我有以下问题:

我检查我的表单上的一些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;
}

所以如果有人能告诉我为什么这不起作用我真的很感激.非常感谢.

Answer 1

你有一个errorHTML 类,在你的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;
}