css - 停止重复 CSS 代码

Question

我有这个 3x 的 CSS 块，为我的 3 个 HTML Div 提供服务，实际问题是代码重复了 3 次，只有一个更改，这当然是 div 的背景颜色:background-color: #xxxxx;我的问题是，我将如何不重复这个 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>

Answer 1

不需要多个类。只需预先定义通用属性，然后单独指定唯一属性:

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