Question

有没有办法干掉这个CSS？唯一不同的是颜色？

div.base-text-gold {
    position: absolute; bottom: 9px; color: #FED577; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-grey {
    position: absolute; bottom: 9px; color: #D1D2D4; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

Answer 1

将颜色分成不同的CSS类，如下所示：

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.gold {
    color: #FED577;
}

div.grey {
    color: #D1D2D4;
}

然后简单地将两个类应用于元素：

<div class="base-text gold">...</div>

Answer 2

您可以尝试其中一个lessCSS 或dotlesscss 图书馆可用

Answer 3

您可以创建“基类”base-text，然后将颜色保留在“子类”中：

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold {
    color: #FED577;
}

div.base-text-grey {
     color: #D1D2D4;
}

当然，缺点是您必须在div中添加2个类而不是单个类：

<div class="base-text base-text-gold">...</div>

Answer 4

我最初的反应是告诉你，在CSS类名中指定颜色可能不是一个好主意。那时，它实际上并不比内联CSS好。根据您的具体情况，您最好使用.emphasized或.strong获取黄金文字。即使这样，您也可以设置样式并使用<em>或<strong>标记。那就说，我回答你的问题怎么样？

答案是试图永远不要两次使用相同的声明。

div.base-text-gold, div.base-text-grey {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold { color: #FED577; }
div.base-text-grey { color: #D1D2D4; }

Answer 5

您可以从不定义颜色的类“base-text”继承。

然后你有两个选择：旁边有一个style =“”......

<style>
div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
</style>

<html><head>[the style thingie above]</head><body>
   <div class="base-text" style="color:BLARGH"> RAWR~ </div>
</body></html>

OR

继承金牌和灰牌

<style>
div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.grey {
    color: #999999;
}
div.gold {
    color: #DDDD99;
}
</style>
<html><head>[the style thingie above]</head><body>
   <div class="base-text gold" style="color:BLARGH"> RAWR~ </div>
   <div class="base-text grey" style="color:BLARGH"> DADADEEEEE~ </div>
</body></html>

Answer 6

嗯......你能做的一件事是：

div.base-text {
    position: absolute; bottom: 9px; font-size: 10px;
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}

div.base-text-gold {
    color: #FED577;
}

div.base-text-grey {
    color: #D1D2D4;
}

在你的每个div中，只需去：

<div class="base-text base-text-gold">This is the gold div.</div>
<div class="base-text base-text-grey">This is the grey div.</div>

CSS - 如何干涸？

6 个答案: