停止重复CSS代码

我有这个3倍的CSS块服务于我的3个HTML div，实际的问题是代码重复了三次，只有一个更改，当然是div的背景色：

background color:#xxxxx我的问题是，我如何不重复这个3倍块，而只保留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;
}

唯一的变化是：
背景色：#0099ff

HTML代码如下：

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

绿色优惠
橙色报价
蓝报
您可以在一个元素上使用多个类

<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;
}

绿色优惠
橙色报价
蓝报
.报盘{
宽度：300px；
高度：25px；
不透明度：0.4；
字体大小：22px；
边框底部：1px实心#555555；
-webkit边框右上角半径：15px；
-moz边界半径右上角：15px；
边框右上角半径：15px；
-webkit边框左上半径：15px；
-左上角moz边界半径：15px；
边框左上半径：15px；
}
B.蓝报盘{
背景色：#0099ff；
}
奥兰吉奥弗先生{
背景色：#F90；
}
GreenOffer先生{
背景色：#66FF00；
}
使用多个类

.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>

绿色优惠
橙色报价
蓝报
尝试使用多个
类

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

绿色优惠
不需要多个课程。只需预先定义公共属性，然后分别指定唯一属性：

.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;
}

我更喜欢层次更高的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>

如果你的页面上有其他元素，你也希望有一个绿色，但在某些方面略有不同，可能会导致问题。可能是绿色文本，而不是绿色背景。哎哟，想象一下如果你有那只虫子？绿色背景上的绿色文本？=）

你可以用

.offerGreen{ /*...*/ }

你的介绍写得太多了。虽然相对不重要，但它也会增加页面的大小，因为

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



比…更多的字符

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



尽管它只是一个文本，并且使用了gzip压缩，但除非你在优步优化，否则它的实际影响是不值得优化的

我希望这有帮助

干杯
 每个对象可以有多个类，也可以将块应用于多个类：

.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;
}

为了防止重复CSS代码，可以使用CSS框架，例如
LESS
或
SASS
。您可以使用它们变量、嵌套、函数，它们很好地实现了继承，您也可以使用混合





还有很多其他的CSS框架，所以这是你的选择。但是我推荐CSS-FW。
除了其他答案之外，您还可以使用“ends with”选择器：

[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;
}

[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;
}