如何让一个班级有三种不同的颜色？

Question

我正在使用模板。客户想要三个按钮不同的颜色。这三个都是由同一个班级控制的。如果我检查页面，我可以将背景颜色更改为不同，我可以将其插入元素样式。如何在CSS中永久更改此变更？

这是当前按钮：

这是客户端想要按钮的方式：

控制它的CSS是：

    .full-width .generic .third p a {
     background-color: #543D91;
     border-bottom: 1px solid #fff;
     color: #fff;
     display: block;
     float: left;
     padding: 10px 0;
     width: 100%;
     border-radius: 99em; 
     }

如何更改此设置以使每个按钮的颜色不同？这甚至可能吗？它必须在CSS中完成。我不能使用JavaScript / jQuery或类似的东西。它必须只在CSS和HTML中使用JSFiddle。请注意，HTML仅创建每个按钮的标签。我无法使超链接具有样式。

如果这是不可能的，你能不能给我一些代码，我可以将3个图像集中在一个900px容器中的按钮，中间有填充？我感谢每个人的帮助！

Answer 1

您可以使用2个类并创建一个类似：

的CSS

.cls {
  color: #FFF;
  padding: 10px 0;
  width: 30%;
}

.c1 {
  background-color: #F00;
}

.c2 {
  background-color: #0F0;
}

.c3 {
  background-color: #00F;
}

<button class="cls c1">Button1</button>
<button class="cls c2">Button2</button>
<button class="cls c3">Button3</button>

Answer 2

我试图用jQuery解决你的问题，试试看看，它很简单，就像魔法一样：

这是虚拟HTML：

<div id="searchable">
   <a>
   Something
   </a>
   <button>
   Something
   </button>
   <a>
   Something2
   </a>
   <button>
   Something2
   </button>
   <a>
   Something3
   </a>
   <button>
   Something3
   </button>
</div>

这是必需的jQuery：

var buttons = $("#searchable").find("button");
var color = ["red", "blue", "green"];
buttons.each(function(i){
    $(this).css('color', color[i]);
});

这是我小提琴的链接： https://jsfiddle.net/x5ve63w5/1/