覆盖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 --
}