1

色のみが異なるさまざまなボタン スタイルを作成したいと考えています。そのため、ボタンのベース CSS クラスを作成し、それらを継承して色をオーバーライドするだけだと思っていました (少なくとも、Java の観点からはそれが私のアプローチになります...)。

.myButton {
   padding:...
   width:...
   background: white;
}

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}

しかし、これらのクラスをクラスに拡張させるにはどうすればよいのでしょうか?.myButton適用するだけで、.myButton-ok他のすべての基本ボタン スタイルが維持されるようになります。

4

5 に答える 5

1

ボタンにクラスを追加して有効にします。このようなもの-

.myButton {
padding:...
width:...
background: white;
}

.red {
background: red;
}

.blue {
background: blue;
}

<button Class="myButton">Button</button>  // basic button
<button Class="myButton red">Button</button>  // with red BG
<button Class="myButton blue">Button</button>  // with blue BG
于 2013-04-07T19:04:20.950 に答える
0

CSS には、プログラミングの意味でのクラスや継承の概念はありません。特定の属性 (HTML のもの) を持つ要素のプロパティを指定できるクラスセレクターだけがありclass、まったく異なる意味で継承があります。特定の条件下では、要素はドキュメントツリーの親からプロパティ値を継承します (これはクラスとは関係ありません)。

したがって、私たちは別の考え方をする必要があります。あなたの例では、例えば使用できます

.myButton {
   padding:...
   width:...
   background: white;
}

.ok {
   background: green;
}

.warn {
   background: orange;
}

のようなマークアップ<button class="button warn">。これは、要素が 2 つのクラスに属し、両方のクラスの宣言が適用されていることを意味します。ここで、他の条件が等しい場合、同じプロパティの 2 つの宣言が要素に適用される場合、後者の宣言 (つまり、スタイル シートの後半にある宣言) が優先されることが重要になります。

于 2013-04-07T19:19:41.737 に答える
0

Css では、そのようなことはできません。

ただし、このような状況では、以下のように共通プロパティと特定のプロパティを分離することで同じことを実現できます。

 .myButton, myButton-ok, myButton-warn {
   padding:...
   width:...;
   /*Other common properties, except specific ones like "background"*/
}

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}
于 2013-04-07T19:04:22.407 に答える