1

我有这个由 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;
}

但它被 site.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？谢谢。

4

2 回答 2

3

这是因为CSS Specificity。

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

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

于 2012-11-02T10:20:05.433 回答
0

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

于 2012-11-02T15:22:40.340 回答