指南针+蓝图CSS =输入标签的宽度总是300px？

Question

在尝试查找问题原因时，我禁用了所有自定义样式表。现在，我只使用一个SCSS样式表：

@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@include blueprint;

然而，这个样式表会导致问题。在我的整个应用程序中，我使用<input>标签，如下所示：

<input class="span-17 title" type="text" size="30" name="customer[name]">

如您所见，我正在使用Blueprint的span-类来表单元素。没有指南针，这一直很好。

但是，Compass正在为表单元素生成其他样式规则：

input.span-17, textarea.span-17, select.span-17 {
    width: 840px;
}
/* followed by: */
input.text, input.title, input[type="email"],
input[type="text"], input[type="password"] {
    width: 300px;
}

使用这两个规则，我的所有输入字段的宽度都为300px（完全破坏了我的应用程序布局）。为什么Compass会产生上面提到的第二条规则（对我来说完全没有意义）？我该如何防止这种行为？

更新：似乎我还不够清楚。我想在表单输入字段中使用Blueprint的span-类。将所有<input>宽度设置为常量值，不是我希望的解决方案。相反，我正在寻找一种方法使span-类与Compass一起使用。期望的行为就像没有指南针的Blueprint CSS - 在任何其他情况下，我将不得不改变很多HTML模板 - 这正是我想要避免的。

Answer 1

您需要以更高的特异性定义CSS规则。

尝试这样的事情：

@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@include blueprint;

body input.text, body input.title, body input[type="email"],
body input[type="text"], body input[type="password"] {
    width: inherit;
}

或如果以下部分在您自己的代码中：

input.span-17, textarea.span-17, select.span-17 {
    width: 840px;
}

您可以类似地增强规则的特异性：

body input.span-17, body textarea.span-17, body select.span-17 {
    width: 840px;
}

您可以在Malarkey's article中找到有关CSS特性（及其与星球大战的关系）的更多信息。

Answer 2

我相信@include blueprint;会带来整个节目，包括网格，表格，排版等。

如果您不希望自动创建的input.span类不使用它。只做：

@include blueprint-grid;

Answer 3

如果可能，您可以使用jquery覆盖元素宽度。

$(document).ready(function(){
    $("input[type='text']", "input[type='password']").css("width","100px");
});

希望它有所帮助。