asp.net-mvc-3 - 覆盖文本框错误消息的 css

Question

我在视图中显示一个电话号码，如下所示

    <li>
    <label >
    Home No.</label>
    @Html.TextBoxFor(x => x.PhoneHome)
    </li>

并且默认生成的验证错误信息类如下

.formError .formErrorContent
{

background: #ee0101;
color: #fff;
width: 150px;
font-family: tahoma;
font-size: 11px;
border: 2px solid #ddd;
box-shadow: 0px 0px 6px #000;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
padding: 4px 10px 4px 10px;
border-radius: 6px;
-moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 display:inline;
}

这个 css 用于所有其他领域，所以我不想改变这个。我想为家庭电话号码字段覆盖此 CSS 中的一些属性。

如何仅针对特定字段覆盖和使用 css？

Answer 1

您可以为包装<li>元素分配一个类：

<li class="phone">
    <label>Home No.</label>
    @Html.TextBoxFor(x => x.PhoneHome)
</li>

然后在您的 CSS 中，您可以添加一条新规则：

.phone .formError .formErrorContent {
    -- YOUR CUSTOM RULES COME HERE --
}