Question

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

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

我有一个表格虽然我不想要宽度：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吗？

Answer 1

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

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

此CSS规则应该有效：

input.analysis { width: auto; }

Answer 2

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

input.analysis {
    width: auto;
}

无法覆盖Ruby on Rails标记

2 个答案: