Question

如果用户未正确输入字段，则会显示包含class="ErrorInput"和class="TextError"的错误消息。

我遇到ErrorInput类的问题，当它在html标记中定义时 - 它不会覆盖默认的输入类。

HTML ：

<li>
  <label>First Name</label>
   <input type="text" value="" class="ErrorInput" name="firstname">
   <div class="TextError">Please enter First Name</div>  
</li>
<li>
   <label>Second Name</label>
   <input type="text" value="Gates" name="secondname">
</li>

CSS：

.FormStyle .ErrorInput {
    border: #AD2930;
}

.FormStyle input[type=text], .FormStyle textarea {
    padding: 3px;
    display: inline-block;
    width: 290px;
    border: 1px solid #BDC7D8;
    margin: 0;
    font-size: 12px;
}

Answer 1

您要为border-colour和.FormStyle .ErrorInput

中的输入定义.FormStyle input[type=text]

由于.FormStyle input[type=text]比.FormStyle .ErrorInput更具体，因此会应用#BDC7D8颜色。

您需要使第一个CSS选择器更具体，以覆盖第二种颜色：

.FormStyle input[type=text].ErrorInput {
    border-color: #AD2930;
}

在此处详细了解特异性：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

您需要正确指定边框：

.FormStyle .ErrorInput {
    border: 1px solid #AD2930;
}

此css部分必须放在输入样式

之后

它不会覆盖类

2 个答案: