覆蓋CSS的文本框錯誤消息

Question

我顯示視圖中的電話號碼如下

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

，默認情況下genereated驗證錯誤消息類如下

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