3

我有这个 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>
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

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

<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 选择器选择同时具有the和class的.offer.green元素。offergreen

刚刚...

.green{ /*...*/ }

如果您页面上的某些 OTHER 元素也希望为绿色，则可能会导致问题，但在某些方面略有不同。也许是绿色文本而不是绿色背景。哎呀，想象一下如果你有那个错误？绿色背景上的绿色文字？=)

你可以用...

.offerGreen{ /*...*/ }

你的介绍比必要的要多。虽然相对微不足道，但它也会增加页面的大小，因为...

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

是比...更多的字符

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

尽管它只是文本并且使用 gzip 压缩，但除非您进行超级优化，否则实际影响不值得优化。

我希望这会有所帮助！

干杯!

于 2013-03-13T00:35:46.553 回答
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 回答
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 回答
-1

为了防止重复 CSS 代码，可以使用 CSS 框架，例如LESS或SASS。你可以和它们一起使用变量、嵌套、函数，它们很好地进行了继承，你也可以使用mixins。

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

于 2013-03-13T00:37:10.527 回答