无法覆盖 Ruby on Rails 标记中的主级别 CSS答案

【问题标题】：Can't overwrite main level CSS in Ruby on Rails tag无法覆盖 Ruby on Rails 标记中的主级别 CSS
【发布时间】：2015-11-28 04:26:23
【问题描述】：

我有一个 CSS 文件，它使用以下代码控制所有表单元素：

input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}

我有一个表单，虽然我不想要 width: 100% 元素，所以我尝试专门为输入设置一个 ID

#analysis {
 .input {
   width: auto;
  }
}

在我用 Ruby on Rails 编写的表单中，我按如下方式调用单选按钮

<%= radio_button_tag :choice, "best_beer", true, class: "analysis" %>

我可以检查元素，它表明它正在使用分析类，但是第一个 CSS 总是优先。我对 CSS 了解不多，但我使用的是这里的逻辑：http://www.htmldog.com/guides/css/intermediate/specificity/ 基于 ID 的 CSS 应该控制 HTML 选择器，为什么它不为我这样做？是因为我的课是Ruby吗？

【问题讨论】：

标签： html css ruby-on-rails ruby

【解决方案1】：

您混淆了元素的 id 和类，并且您不应该嵌套选择器，因为它们都直接应用于同一个元素。您在 CSS 中使用了 #analysis 选择器，该选择器用于 id 为 analysis 的元素，但在嵌入式 Ruby 中，您使用 analysis 类标记元素。使用您正在使用的 Ruby，试试这个 CSS：

input.analysis {
    width: auto;
}

【讨论】：

成功了。是的，我明白你所说的 ID 和类是什么意思。我曾尝试将该课程放在原始声明中，但我认为它不起作用。把它拆开，让你输入它的方式就完美了。谢谢。

【解决方案2】：

您的第二个 SCSS 或 LESS 文件中有两个错误（如果它只是一个 CSS 文件，则为 3 个）。

应该是input（对于<input/>），而不是.input（对于<ANY class="input"/>）。
#analysis input 在 ID 为 analysis 的内容中选择所有 <input/>，而不是 <input id="analysis"/>。

这个 CSS 规则应该有效：

input.analysis {
  width: auto;
}

【讨论】：