如何将css设置为输入标记的特定属性

Question

我有以下代码:

HTML

<div id=addQuesion">
  <li>
    <label>Text</label>
    <input type="text"/>
  </li>
  <li>
    <label>Try</label>
    <input type="button"/>
  </li>
</div>

CSS

#addQuesion li label {
  position: relative;
  top: 10px;
  left: 10px;
  font-size: 25px;
  border: 1px black solid;
  padding-right: 50px;
}

#addQuesion li input {
  position: relative;
  top: 10px;
  left: 10px;
  width: 400px;
  font-size: 25px;
}

确保两个输入的宽度为400px,但我想知道如何使每个输入(文本,按钮)具有不同的宽度.

我知道我可以使用这样的风格,<input style="..." />但我需要使用CSS.我也知道我可以<div>为每个输入使用不同的但我想把它们放在同一个div中.

Answer 1

您可以按类型定位输入,从而为它们应用不同的样式:

CSS

/* Text Field */
#addQuesion input[type="text"] {
  width: 200px;
}

/* Button */
#addQuesion input[type="button"] {
  width: 20px;
}

您可以在此处阅读更多相关信息:W3C属性选择器