Question

我有这个由MVC3 Razor Engine生成的HTML：

<div class="editor-field">
    <div id="autoComplete">
        @Html.EditorFor(model => Model.group_name, new { ID = "group_name" })
        @Html.ValidationMessageFor(model => Model.group_name)
    </div>
</div>

我正在为自动完成功能编写自定义CSS：

#group_name input[type='text'], input[type='password']
{
    padding: 0px;
    border: 1px solid black;
    background-color: white;
    overflow: hidden;
    z-index: 99999;
}
#group_name input[type='text'], input[type='password'] ul
{
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
#group_name input[type='text'], input[type='password'] li
{
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block; /*  if width will be 100% horizontal scrollbar will apear     when scroll mode will be used */ /*width: 100%;*/
    font: menu;
    font-size: 12px; /*     it is very important, if line-height not setted or setted   in relative units scroll will be broken in firefox  */
    line-height: 16px;
    overflow: hidden;
}

但它被网站css所覆盖，默认情况下MVC 3解决方案就是这样：

input[type="text"], input[type="password"]
{
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

有谁知道我必须写什么CSS来定位我的div并输入html？感谢。

Answer 1

这是因为CSS Specificity。

您需要使规则更具体，以覆盖site.css样式。

或者，只需覆盖文件本身的site.css样式即可。 Site.css不像一个不应该被覆盖的样式库。它只是一个可以编辑/删除的开始模板。

Answer 2

我最终使用firebug来查看HTML的变化。 IE有自己的javascript调试选项，但能够实时看到li渲染并查看它的标签帮我写了我的CSS。

MVC3 Site.css覆盖我的自定义样式

2 个答案: