简化样式表中的html css选择器

Question

我有以下html和一些bootstrap类

<input id="OP_CG1" class="form-control input-sm text-right" value="160"  type="text">
<input id="OP_CG2" class="form-control input-sm text-right" value="280"  type="text">
<input id="OP_CG3" class="form-control input-sm text-right" value="600"  type="text">

我想简化为

<input id="OP_CG1" value="160"  type="text">
<input id="OP_CG2" value="280"  type="text">
<input id="OP_CG3" value="600"  type="text">

使用css选择器。我试试这个，但它不起作用。

input[id^="OP_CG"].form-control.input-sm.text-right
{
}

你能帮我吗？我想要一个不使用Jquery的解决方案

Answer 1

要做到这一点，你必须将与应用于输入的三个独立CSS类相关联的CSS组合成一个规则......

.form-control {
    /* form-control styles here */
}

.input-sm {
    /* input-sm styles here */
}

.text-right {
    /* text-right styles here */
}

会变成......

input[id^="OP_CG"] {
    /* form-control styles here */
    /* input-sm styles here */
    /* text-right styles here */
}