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;
}

しかし、デフォルトでMVC 3ソリューションに付属するsite.cssによってオーバーライドされています。これは次のとおりです。

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

div と入力 html をターゲットにするためにどの CSS を書かなければならないか知っている人はいますか? ありがとう。

4

2 に答える 2

3

これは、CSS の仕様によるものです。

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 に答える