css - アイテムをターゲットにする方法

Question

現在、メインのスタイルシートがありますが、そのシートを使用する複数のページがあります。PHP を使用して出力しているため、複数のスタイルシートを作成したくありません。テキスト領域などの特定の要素をターゲットにする方法は次のとおりです。

<div id="regform" class="
<label>Password:</label>
<input name="Password" placeholder="Password"></input>

しかし、CSSは次のとおりです。

input
{
height:100px;
width: 500px;
padding: 10px;
}

それはすべてうまくいきます！それは私が望む外観を作成しますが、それはすべてのテキスト領域をそのように変更します。それは私が望むものではありません。テキスト領域をたくさん使用するので、そのdivのテキスト領域だけをそのように見せたいです。

概要：

1 つの div だけでテキストエリアと要素の外観を変更するにはどうすればよいですか? したがって、他のテキスト領域には影響しません。

これは編集です！これは機能しませんでした。これを見てください! http://jsfiddle.net/wbyQL/1/

score 1 · Accepted Answer

html

<div id="regform" class="x-div">
    <label>Password:</label>
    <input name="Password" placeholder="Password"></input>
</div>

CSS

.x-div input {
    height:100px;
    width: 500px;
    padding: 10px;
}

score 1 · Accepted Answer

セレクターを使用します。その css を適用するテキスト入力を含む THAT div または ANY div のどちらを希望するかによって異なります。

HTML:

<div id="regform" class="
<label>Password:</label>
<input name="Password" placeholder="Password"></input>

CSS:

#regform input
{
height:100px;
width: 500px;
padding: 10px;
}

css をその 1 つだけでなくinput、ANYに適用する場合div:

div input
{
height:100px;
width: 500px;
padding: 10px;
}

CSSセレクターを読むことをお勧めします。

#bar div .foo {
 //css stuff
}

基本的にこれは次のことを意味します: div 内のどこかにあるクラス "foo" を持つ要素を見つけます。その div は id = "bar" を持つ要素内のどこかにあります。

score 0 · Accepted Answer

HTML:

<div id="regform" class="">
<label>Password:</label>
<input name="Password" placeholder="Password"></input>
</div>

CSS:

#regform input
{
height:100px;
width: 500px;
padding: 10px;
}

3 に答える 3