Question

所以我试图改变提交按钮的背景颜色等

 = submit_tag("Submit", class: "btn btn-sm btn-navbar")

我在这里看到多个课程，并想知道这是如何工作的。

我更改了btn-sm的颜色，但发现它没有做任何事情。我试过了btn-navbar这次它有效，但发现这也改变了其他按钮。

如果我想改变提交按钮的背景颜色等，我该如何实现？

Answer 1

添加课程change-color

= submit_tag("Submit", class: "btn btn-sm btn-navbar change-color")

在CSS

中

.change-color{
  background-color: #123456 !important;
}

希望有所帮助！

Answer 2

在样式化时，最好检查生成的html（在浏览器中查看源代码。）生成的输入按钮可能如下所示：

<p id="parentid" class="parentclass"> (or some other container element)
    ...
    <input type="submit" class="btn btn-sm btn-navbar" ... />
    ...
</p>

正如其他人所指出的那样，如果你想要定位一个特定的元素，那么就要添加一个额外的类。我想像这样：

<%= submit_tag "Submit", class: "btn btn-sm btn-navbar myclass" %>

产量

<input type="submit" class="btn btn-sm btn-navbar myclass" ... />

在css中你可以像

那样设计样式

.myclass {color:pink}

但是，如果由于某种原因你无法添加课程，或者你不想这样做，还有其他选择：

input[type="submit"] {color:pink} /* only targets submit buttons */
.parentclass>input {color:pink} /* only targets inputs in a specific element */
#parentid>input {color:pink} /* only targets inputs in a element */
#parentid>:nth-child[2] {color:pink} /* only targets the 2nd child element in the parent */

另外，请记住，多个规则可能适用于您的按钮。有几种方法可以使btn-sm优先：

input.btn.btn-sm.btn-navebar {color：pink} / *更具体的定义优先于 / .btn-navbar {color：pink！important} / 第一个匹配的重要规则优先* /

另外，请记住，多个规则可能适用于您的按钮。有几种方法可以使btn-sm优先：

input.btn.btn-sm.btn-navebar {color:pink} /* more specific definitions take precedence */
.btn-navbar {color:pink !important} /* the first matching important rule takes precedence */

Answer 3

实际上，.btn-sm的新样式有效，但您没有看到任何更改，因为您在HTML .btn-navbar之后的.btn-sm样式。

如果您为.btn-sm保留新的CSS并将class: "btn btn-sm btn-navbar"更改为class: "btn btn-navbar btn-sm"，则会看到您的新样式已应用。

但事实并非如此。如果要将某个样式应用于页面的某个特定元素，则应为此元素指定一个ID，或者可以向其添加另一个类，将来您可以将此类添加到其他元素中。只是不要忘记这个新的类或ID应放在已经存在的所有类之后。

多个班级 - 我如何只针对一个按钮？

3 个答案: