Html 不同输入类上的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11603887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css on different input classes
提问by bonny
hello i have the following problem:
你好，我有以下问题：
i do check my form for some php error messages.
我确实检查了我的表单是否有一些 php 错误消息。
in case of no error i simply have my css setting:
如果没有错误，我只是有我的 css 设置：
.wrapper #frame form fieldset ul input {
color: #f23;
font-size: 10px;
height: 18px;
padding-left: 5px;
margin-top: 3px;
outline:none;
}
and my focus settings:
和我的焦点设置：
.wrapper #frame form fieldset ul input:focus{
color:#fff;
font-weight: bold;
border: 2px solid #fff;
}
okay, now i changed this line:
好的，现在我改变了这一行：
<input type="text" id="normal" name="1" value=""/>
with adding the class of error:
添加错误类别：
<input class="err" type="text" id="normal" name="1" value=""/>
the problem is that my settings just take place for my class details on the input fields but not on my focus settings:
问题是我的设置只针对输入字段上的课程详细信息进行，而不是针对我的焦点设置：
.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;
}
so if there is someone who could tell me why this does not work i really would appreciate. thanks a lot.
所以如果有人能告诉我为什么这不起作用，我真的很感激。多谢。
回答by David says reinstate Monica
You have a class of errorin your HTML, and in your CSS you've set the class to err; if you use the same name consistently (whichever you choose) it should work.
您error的 HTML 中有一个类，并且在您的 CSS 中，您已将该类设置为err; 如果您始终使用相同的名称（无论您选择哪个），它应该可以工作。
Your currentHTML:
您当前的HTML：
<input class="error" type="text" id="normal" name="1" value=""/>
...and CSS:
...和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;
}
Also, in your CSS you're selecting an inputthat's a descendant of an element with the errclass-name, not an inputelement withthat class-name. So, altogether you should use something like:
此外，在你的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;
}
