3

background-color: #xxxxx; 私は、HTML Div の 3 つを提供する CSS のこの 3x チャンクを持っています。実際の問題は、コードが 1 つの変更だけで 3 回繰り返されることです。もちろん、それは div の背景色です:この 3x ブロックを繰り返しますが、1 つのブロックのみを保持しますが、各 Div の色の変化はこれらのオファーごとに異なります。

これは可能ですか、それとも現時点で正しい方法で行っていますか?

.BlueOffer {
width: 300px;
height: 25px;
background-color: #0099ff;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.OrangeOffer {
width: 300px;
height: 25px;
background-color: #F90;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}

.GreenOffer {
width: 300px;
height: 25px;
background-color: #66FF00;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}

唯一の変更点は次のとおりです。background-color: #0099ff;

HTML コードは次のとおりです。

<div class='GreenOffer'>GREEN OFFER</div>
<div class='OrangeOffer'>ORANGE OFFER</div>
<div class='BlueOffer'>BLUE OFFER</div>
4

8 に答える 8

12

複数のクラスは必要ありません。前もって共通のプロパティを定義してから、固有のプロパティを個別に指定します。

.BlueOffer, .OrangeOffer, .GreenOffer {
    width: 300px;
    height: 25px;
    opacity: 0.4;
    font-size: 22px;
    border-bottom: 1px SOLID #555555;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
}

.BlueOffer {
    background-color: #0099ff;
}
.OrangeOffer {
    background-color: #F90;
}

.GreenOffer {
    background-color: #66FF00;
}
于 2013-03-13T00:35:18.883 に答える
6

1 つの要素に対して複数のクラスを使用できます。

<div class='Offer GreenOffer'>GREEN OFFER</div>
<div class='Offer OrangeOffer'>ORANGE OFFER</div>
<div class='Offer BlueOffer'>BLUE OFFER</div>

.Offer {
    width: 300px;
    height: 25px;
    opacity: 0.4;
    font-size: 22px;
    border-bottom: 1px SOLID #555555;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
}

.BlueOffer {
    background-color: #0099ff;
}
.OrangeOffer {
    background-color: #F90;
}

.GreenOffer {
    background-color: #66FF00;
}
于 2013-03-13T00:26:55.740 に答える
3

素晴らしい他の回答に加えて、「で終わる」セレクターを使用できます。

[class$=Offer] {
    width: 300px;
    height: 25px;
    opacity: 0.4;
    font-size: 22px;
    border-bottom: 1px SOLID #555555;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
}

.BlueOffer {
    background-color: #0099ff;
}
.OrangeOffer {
    background-color: #F90;
}

.GreenOffer {
    background-color: #66FF00;
}
于 2013-06-06T18:45:57.140 に答える
2

私は、望ましくない変更を回避しようとする、より階層的な CSS セレクターのアプローチを好みます。

.offer {
  width: 300px;
  height: 25px;
  /* ... etc ... */
}

.offer.blue{
  background-color: #0099ff;
}
.offer.green{
  background-color: #66ff00;
}

同じ方法で適用します。

<div class="offer">Standard Offer</div>
<div class="offer green">Green Offer</div>

ただし、違いは、css セレクターがとクラスの両方.offer.greenを持つ要素を選択することです。offergreen

ただ...

.green{ /*...*/ }

ページ上の他の要素も緑色にしたい場合、問題が発生する可能性がありますが、何らかの点でわずかに異なります。緑の背景ではなく、おそらく緑のテキスト。ああ、そのバグがあったと想像してみてください。緑の背景に緑の文字？=)

あなたが使用することができます...

.offerGreen{ /*...*/ }

必要以上の書き込みを紹介します。比較的重要ではありませんが、ページのサイズも大きくなります...

<div class="offer offerGreen"></div>

よりも多くの文字があります...

<div class="offer green"></div>

それは単なるテキストであり、gzip 圧縮を使用していますが、実際の影響は、最適化を十分に行っていない限り、最適化する価値はありません。

それが役立つことを願っています！

乾杯！

于 2013-03-13T00:35:46.553 に答える
0

複数のクラスを使用する

.offer{
    width: 300px;
    height: 25px;
    opacity: 0.4;
    font-size: 22px;
    border-bottom: 1px solid #555555;

    -webkit-border-top-right-radius: 15px;
        -moz-border-radius-topright: 15px;
            border-top-right-radius: 15px;

    -webkit-border-top-left-radius: 15px;
        -moz-border-radius-topleft: 15px;
            border-top-left-radius: 15px;

     /*or you could use
     border-radius: 15px 15px 0 0;
     */
}

.Blue{background-color: #0099ff;}
.Orange{background-color: #F90;}
.Green{background-color: #66FF00;}

そしてそれを適用する

<div class='Green offer'>GREEN OFFER</div>
<div class='Orange offer'>ORANGE OFFER</div>
<div class='Blue offer'>BLUE OFFER</div>
于 2013-03-13T00:27:01.723 に答える
0

複数使用してみてくださいclass。

CSS:

.offer{    
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.green {
background-color: #66FF00;
}

HTML

<div class='offer green'>Green OFFER</div>

于 2013-03-13T00:27:54.593 に答える
0

オブジェクトごとに複数のクラスを持つか、ブロックを複数のクラスに適用することができます。

.OrangeOffer, .BlueOffer, .GreenOffer {
  width: 300px;
  height: 25px;
  opacity: 0.4;
  font-size: 22px;
  border-bottom: 1px SOLID #555555;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topright: 15px;
  border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
}
.OrangeOffer {
  background-color: #F90;
}
.GreenOffer {
  background-color: #66FF00;
}
.BlueOffer {
  background-color: #0099ff;
}
于 2013-03-13T00:36:24.797 に答える
-1

CSS コードの繰り返しを防ぐために、LESSまたはSASSのような CSS フレームワークを使用することができます。それらで変数、ネスト、関数を使用できます。それらはうまく継承されており、ミックスインも使用できます。

他にも多くの CSS フレームワークがあるので、それを選択してください。ただし、CSS FW をお勧めします。

于 2013-03-13T00:37:10.527 に答える