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

Answer 2

使用属性选择器：

#addQuestion li input[type="text"]
{
   /* ... */
}

或者

#addQuestion li input[type="button"]
{
   /* ... */
}

这是一个常见的问题。

Answer 3

您可以为每个输入添加一个类，并为每个类定义不同的样式。

HTML：

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

CSS：

#addQuesion li input.input1{
    width: 400px;
}
#addQuesion li input.input2{
    width: 600px;
}

Answer 4

您可以使用以下内容：

[title]
{
color:blue;
}

Reference

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

4 个答案: