Question

我有一个带有默认，成功，错误css类的电子邮件文本框。

<input id="emailInput" class="sansserif inputuser" style=" margin-top: 5px;" type="text" placeholder="Enter Email.."/>

.default{   
    width: 306px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    color:  #737373;
    font-weight: 600;
    background-color: white;
    background-image: url('../Styles/Icons/User Male-35.png');
    background-position: 5px 5px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}

.error{ 
    width: 306px;
    box-sizing: border-box;
    border: 2px solid #ff0000;
    border-radius: 4px;
    font-size: 16px;
    color:  #737373;
    font-weight: 600;
    background-color: white;
    background-image: url('../Styles/Icons/User Male-35.png');
    background-position: 5px 5px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;    
}

.success{ 
    width: 306px;
    box-sizing: border-box;
    border: 2px solid #00b33c;
    border-radius: 4px;
    font-size: 16px;
    color:  #737373;
    font-weight: 600;
    background-color: white;
    background-image: url('../Styles/Icons/User Male-35.png');
    background-position: 5px 5px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;    
}

这里我在验证电子邮件文本框时应用了以下css类的默认，错误和成功，但只有上述三个类的区别仅在于 border 属性。如何减少冗余的css属性任何更好的方法来实现这一目标。

Answer 1

您可以在一个地方定义类似的css并加入多个选择器，并在必要时覆盖以后：

注意： 您要覆盖的样式，即.error和.success必须遵循通用样式，否则它们将被默认样式覆盖，您将看不到任何更改。

.default,
.error,
.success {   
  width: 306px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  color:  #737373;
  font-weight: 600;
  background-color: white;
  background-image: url('../Styles/Icons/User Male-35.png');
  background-position: 5px 5px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

.error { 
  border-color: #ff0000;
}

.success { 
  border-color: #00b33c;
}

如何在没有多余的情况下以最佳方式使用css类？

1 个答案: