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

【问题标题】：MVC3 Site.css overriding my custom stylesMVC3 Site.css 覆盖我的自定义样式
【发布时间】：2012-11-02 10:16:43
【问题描述】：

我有这个由 MVC3 Razor 引擎生成的 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;
}

但它被默认情况下与 MVC 3 解决方案一起提供的 site.css 覆盖，这是：

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

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

【问题讨论】：

您的 CSS 是在网站 CSS 之后还是之前调用？如果是后来就更好了。此外，您应该更清楚地指定您的 css，例如"div.mydividorclass 输入"

标签： css asp.net-mvc-3 razor

【解决方案1】：

这是因为CSS Specificity。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：