Question

我有3个大小的CSS服务我的3个HTML Divs，实际的问题是代码重复三次只有一次更改，当然是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;
}

Answer 2

您可以在元素上使用多个类。

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

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

Answer 4

我更喜欢更层次化的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会选择 {/ 1}}和offer类的元素。

刚刚......

green

可能会导致问题，如果你的页面上有一些OTHER元素，你也想要一个绿色，但它在某种程度上略有不同。也许绿色文字而不是绿色背景。哎呀，想象一下，如果你有这个bug？绿色背景上的绿色文字？ =）

你可以使用......

.green{ /*...*/ }

你介绍的写作多于必要的。虽然相对无关紧要，但它也会增加页面的大小，因为......

.offerGreen{ /*...*/ }

比......更多的字符。

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

虽然它只是文本和gzip压缩，但除非你进行优化，否则实际影响不值得优化。

我希望有所帮助！

干杯！

Answer 5

使用多个班级

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

Answer 6

尝试使用多个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>

Answer 7

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

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

Answer 8

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

还有许多其他CSS框架，所以它是您的选择。但我推荐CSS FW。

停止重复CSS代码

8 个答案: