如何继承css选择器来改变宽度

Question

我将css样式定义为....

.field_input, .fi { /* input textbox */
    color: #555555;
    font-family: Arial, Verdana, Georgia, sans-serif;
    font-size: 12px;
    vertical-align: top;
    }

我想创建3个继承所有这些属性的新样式，但更改宽度....

.field_input_small {width: 15px;}
.field_input_medium {width: 30px;}
.field_input_large {width: 55px;}

我知道这不是正确的语法。我该怎么做呢？谢谢！

Answer 1

您可以对html元素使用多个css类：

<强> CSS：

.field_input, .fi { /* input textbox */
    color: #555555;
    font-family: Arial, Verdana, Georgia, sans-serif;
    font-size: 12px;
    vertical-align: top;
}

.field_input_small {width: 15px;}
.field_input_medium {width: 30px;}
.field_input_large {width: 55px;}

<强> HTML：

<div class="field_input field_input_small"></div>
<div class="field_input field_input_medium"></div>
<div class="field_input field_input_large"></div>

Answer 2

将所有样式应用于所有类

.field_input_small, .field_input_medium, .field_input_large, .fi { /* input textbox */
    color: #555555;
    font-family: Arial, Verdana, Georgia, sans-serif;
    font-size: 12px;
    vertical-align: top;
    }

然后将特定样式应用于特定类，如下所示

.field_input_small {width: 15px;}
.field_input_medium {width: 30px;}
.field_input_large {width: 55px;}