html - 表单中的 CSS 继承问题

Question

我这里有 3 个 CSS 类:

.mail-collector {
  display: flex;
  flex-direction: row;
}

.mail-collector input {
  border: solid 3px white;
  color: white;
  background-color: rgba(255, 116, 97, 0);
  font-family: 'Lato';
  font-size: 14;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 28px;
  }

.send {
  border: solid 3px red;
}

当我将它们应用于我的表单时，我没有成功将最后一个提供给提交元素(发送)。我该如何继续？

<div class="mail-collector">
<%= form_for Subscriber.create, html: {class: "mail-collector"} do |f| %>
        <%= f.text_field :email, placeholder: "email address" %>
        <%= f.submit "send", class: "send" %>
      <% end %>
    </div>

Answer 1

尝试使用 !important在你的 .send 类中，像这样使用它:

.send {
 border: solid 3px red !important;
}