html - 如何继承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>