簡化樣式表中的html css選擇器

Question

我有一些帶有引導類的以下html

<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 */
}