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;
}

確かに 2 つの入力の幅は 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属性セレクターをご覧ください。

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;
} 

参照