2

私のアプリケーションには異なるフォーム ページがあります。これらのフォームのほとんどのテキスト ボックス要素は、幅プロパティ (150px)、フォント ファミリ、フォント サイズなど、同じグローバル CSS ルールを共有します。そこで、これらのテキスト ボックスのほとんどに対して、グローバルな css タイプ セレクター クラスを作成します。ただし、これらのフォームの一部のテキスト ボックスでは、幅プロパティの別の値 (小さいまたは広い) が必要です。特定のテキスト ボックスのグローバル タイプをオーバーライドするにはどうすればよいですか?

以下は、ほとんどのフォーム テキスト ボックスのグローバル タイプ セレクター クラスです。

input[type=text]{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

前もって感謝します。

4

1 に答える 1

4

これらの特定のテキスト ボックスのクラスを作成し、そのクラスにスタイルを適用します。

<input type="text" class="short" />

input[type=text]
{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

input[type=text].short
{
   width: 90px;
   ...
}

このテキスト ボックスは、次のスタイルを使用します。

width: 90px;
font-family: verdana,
font-size: 12px;

または、フォーム全体でこれらの異なるスタイルが必要な場合は、親要素のセレクターを設定します。

<div class="shortform">
   <input type="text" />
</div>

input[type=text]
{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

.shortform input[type=text]
{
   width: 90px;
   ...
}
于 2013-07-24T14:23:43.113 に答える