html - 如何将 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 Attribute Selector