如何为不同的输入字段获得不同的背景颜色

Question

我有多个输入字段，如何为备用字段应用不同的背景颜色。现在相同的颜色应用于每个输入字段。

现在，所有输入字段的背景颜色都是红色，我怎样才能为备用输入字段设置不同的颜色。

input {

  background-color : red; 

}

<table id = "data">

<tbody>

<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>

</tbody>

</table>

Answer 1

给你想要用不同颜色着色的输入，一个 class 将覆盖 input {background-color : red;}:

input {

  background-color : red; 

}

.blue {
  background-color: blue
}

<table id = "data">

<tbody>

<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" class="blue"/></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" class="blue"/></td></tr>

</tbody>

</table>

Answer 2

不需要多个类。使用 :nth-child() 选择器

#data tr:nth-child(odd) and #data tr:nth-child(even)

#data tr:nth-child(odd) input {

  background-color : red; 

}

#data tr:nth-child(even) input {

  background-color : blue; 

}

<table id = "data">

<tbody>

<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>
<tr><td><input type="label" /></td></tr>

</tbody>

如何为不同的输入字段获得不同的背景颜色

How to get different background color for different input fields

html

css

input

angular-ui-bootstrap