css - 入力ボックス内にあるものの適切なセレクターを作成する方法は?

Question

入力ボックスのフォームがあり、適切なセレクターを作成する必要があります。入力ボックス内にあるものにのみ属性を割り当てる必要があります。フォームは次のようになります。

<label></label>
<input type="text" disabled="disabled" name="xxx" size="100" value="abcd" class="yyy" />

ただし、ページにはこのクラスの要素が他にもあります。

最善の方法は何ですか？

score 0 · Accepted Answer

いずれかを使用できますがinput.yyy {}、これはすべてのブラウザーで機能しますが、yyy のクラスを持つページに複数の入力要素がある場合は、それらすべてが選択されます。

別の方法として、新しい CSS3 セレクターを使用する input[name=xxx] がありますが、これは古いブラウザーでは機能しないため、スタイルがどこでも機能することがどれほど重要かによって異なります。

score 0 · Accepted Answer

クラス「yyy」を追加したので、先に進んで次のことを実行できます。

<style type="text/css">
.yyy {
  font-size: 14px;
  font-family: Arial;
  color: #FF0000;
}
</style>

もちろん、その HTML コードを上に貼り付けて HTML ドキュメントに埋め込むこともできますが、HTML と CSS を互いに離しておくことをお勧めします。

このコードを head タグに追加します。

<link href="some/style.css" type="text/css" rel="stylesheet" />

そしてstyle.cssの内部：

.yyy {
 font-size: 14px;
 font-family: Arial;
 color: #FF0000;
}

2 に答える 2