Question

我已经定义了Css类

form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
    background: url("../images/input-bg.gif") repeat-x scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 4px 5px;
}

现在当我在html中使用输入时，css会影响表单上的所有输入因为我在css中使用了[form]。但我不想影响某些输入texbox的css ..

我怎么能做到这一点？

Answer 1

我会以另一种方式执行此操作，只需将其他类添加到您不希望受该规则影响的输入。这样的事情。

编辑添加评论建议

/* General rule for inputs */
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
    background: url("../images/input-bg.gif") repeat-x scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 4px 5px;
}

/* Specific rule for inputs */
form input[type="text"].reset-inputs, form input[type="email"].reset-inputs, form input[type="password"].reset-inputs, form textarea.reset-inputs, form select.reset-inputs {
    background: none;
    border: none;
    padding: 0;
}

Answer 2

你可以为你不想要效果的输入框添加一个类，并覆盖另一个：

<input class="noeffect"/>


form input.noeffect {
   background: none;
}

Answer 3

将类添加到您想要影响的输入felds：

html: <input class="here" ... />

css: form input.here[type="text"]

或者创建一个带有输入的div区域：

<div class="here">
    <input /><input /><input />
</div>

css: form .here input[type="text"]

Answer 4

有几个属性，例如:nth-child() :last-child, :first-child等：

像这样：

form input[type="text"] + form input[type="text"] {
background:none;

}

或

form input[type="text"]:nth-child(2n){
  background:none;
}

或

给它上课

form input.diff{
 background:none;
}

删除HTML中的特定元素的CSS类

4 个答案: