私のサイトには2つの異なるボタンがあり、両方を異なって見せたいと思っています。それを機能させる方法がわかりません。
現在、私のCSSコードは次のとおりです。
input.button{ }
しかし、2つのボタンがあり、両方に異なる色が必要な場合は、次のようにします。
<input type=button class="button1">
<input type button class="button2">
これをCSSにリンクする方法がわかりません。私はこれを試しましたが、何も起こりませんでした：
input.button.button1{}
input.button.button2{}
もちろん、中括弧には何も追加していませんが、追加しているのでうまくいかないようです。ただし、そのうちの1つを削除してから、「。button1」も削除すると、正常に機能しているように見えます。しかし、ボタンごとに異なるプロパティを設定することはできません。
あなたはこれを求めている：
<input type="button" class="button button1" />
<input type="button" class="button button2" />
CSS
input.button { /* Shared styles here */ }
input.button1 { /* Button 1 specific styles here */ }
input.button2 { /* Button 2 specificstyles here */ }
これを試して、cssクラスを定義してください。
input .button1{...}
input .button2{...}
基本的に、タグ名、要素ID、クラス、またはこれらの組み合わせに基づいてCSSを定義できます。3。「ボタン」は入力タグの属性の1つの値にすぎないため、コード内に配置されません。
クラスを識別するだけです。
.button1 { foreground-color: red; }
.button2 { foreground-color: green; }
あなたはただ使うことができます
.button1{}
.button2{}
乾杯
このマークアップの場合：
<input type="button" class="button1" value="one">
<input type="button" class="button2" value="two">
このCSSは、異なる色になります。
input.button1 { color: red; }
input.button2 { color: blue;}
このJSFiddleを参照してください。
CSSとHTMLのエラーを必ずクリーンアップしてください。
ここでの2つのポイントは、最初にcssでボタンを実際に定義することに失敗していることです。cssでタイプを定義するには、次のようにします。
input[type="button"]
次に、HTMLエラーが発生します。これは次のとおりです。
<input type button class="button2">
これである必要があります：
すべて完了すると、youtcssは次のようになります。
input[type="button"].button1{}
input[type="button"].button2{}
このように特定する必要がない場合は、代わりに次のことを行うことができます。
.button1 {}
.button2 {}