如何为一个 class 设置两种不同的颜色？

Question

我在 bootstrap 中使用 btn，所以在制作 div class 时我需要这个词。我们怎样才能让一个 btn 黄色，另一个蓝色？我试着用 id 来做这个。我哪里错了？

谢谢！

_form

<%= button_tag(type: 'submit', class: "btn", id: "2") do %>
  <span class="glyphicon glyphicon-plus"></span>
<% end %>

<%= button_tag(type: 'submit', class: "btn") do %>
  <span class="glyphicon glyphicon-plus"></span>
<% end %>

css.scss

.btn {
background: #446CB3;
  #2 {
   background: black;
  }
border: #000;
border-radius: 8px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
font-size: 15px;
padding: 8px 18px 8px 18px;
text-decoration: none;
}

Answer 1

您的 css 选择器以 ID 2 的元素为目标，该元素是 .btn 的子元素（.btn #2 不正确）。所以把它改成这样：

.btn {
background: #446CB3;

border: #000;
border-radius: 8px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
font-size: 15px;
padding: 8px 18px 8px 18px;
text-decoration: none;
}

#2.btn {
   background: black;
  }

Answer 2

为什么不使用 Bootstrap 的按钮 classes？

http://getbootstrap.com/css/#buttons-options

根据您网站的配色方案（例如，您为 'primary' 颜色设置的颜色），您可以执行以下操作：

class："btn btn-primary" 和 class："btn btn-warning"。这样您就不必更改 css 中的背景颜色或创建其他 ID。

如何为一个 class 设置两种不同的颜色？

How to have two different colors for one class?

css

ruby-on-rails

sass

twitter-bootstrap