css效率更高？改变颜色的箭头和标题

所以我有三个框，每个框<h2>标题区域有不同的颜色。css效率更高？改变颜色的箭头和标题

有没有办法让<h2>下方的箭头基本得到所选颜色而不会使代码太长？

是否有比这样做更有效的方法比为每个盒子制作3个不同的CSS代码和3个不同的箭头代码？

基本上我希望每个<h2>和箭头是相同的颜色，但选择每种颜色。

例如：在的jsfiddle http://jsfiddle.net/mGn9S/

<div class="service"> 
    <div class="service-img"> 
     <img src="images/img.png" /> 
    </div> 
    <!--end image--> 
    <h2 class="service-style color_service">test1</h2> 

    <div class="service-text"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…</p> 
    </div> 
</div>

最好的例子就是盒子三 “实验3”

来源

2013-12-16 op1001

你的意思是不是只是让一类为每种颜色更简单？（a la .service-text.orange：before {border-top：30px solid orange;}例如） – jm0

为了使这更有效，使用CSS预处理程序像LESS或SASS。

CSS解决方案：

尝试：

添加不同类别，给边界的颜色。

HTML：

<div class="service-text text1">... 
<div class="service-text text2">... 
<div class="service-text text3">...

CSS：

.service-text.text1:before{border-top-color:#2ecc71} 
.service-text.text2:before{border-top-color:#e67e22} 
.service-text.text3:before{border-top-color:#3498db} 
.service-text:before{border-top: 30px solid;}

DEMO here.

来源

2013-12-16 07:50:24 Hiral

如果我使用sass或更低版本作为预处理器，我需要在rails上使用ruby来实际运行sass或更少的文件？ – op1001

@ op1001不，你不需要轨道上的红宝石。对于sass，我没有任何想法。 – Hiral

@ op1001 SASS需要编译它的机器上的Ruby，但是之后你只需上传编译的文件。 LESS可以在本地编译，也可以编译用户端的JS插件 – Ming

css效率更高？改变颜色的箭头和标题

回答

相关问题