两个选项的：
<style>
.s1 {
background:#28a745;
color:#fff;
font-size:0;
}
.s1:after {
content:"有效";
font-size:14px;
}
.s0 {
background:#dc3545;
color:#fff;
font-size:0;
}
.s0:after {
content:"无效";
font-size:14px;
}
</style>
<span class="status s{zt}" style="padding:5px 10px;border-radius:5px;display:inline-block;">
</span>
实现效果如下：
下面是多个选项的
<style>
/* 公共样式 */
.status{
color:#fff;
font-size:0;
}
/* 0 归还 */
.s0{ background:#1890ff; }
.s0:after{ content:"归还"; font-size:14px; }
/* 1 入库 */
.s1{ background:#28a745; }
.s1:after{ content:"入库"; font-size:14px; }
/* 2 领用 */
.s2{ background:#1677ff; }
.s2:after{ content:"领用"; font-size:14px; }
/* 3 借用 */
.s3{ background:#fa8c16; }
.s3:after{ content:"借用"; font-size:14px; }
/* 4 维修 */
.s4{ background:#722ed1; }
.s4:after{ content:"维修"; font-size:14px; }
/* 5 报废 */
.s5{ background:#595959; }
.s5:after{ content:"报废"; font-size:14px; }
/* 6 未知 */
.s6{ background:#8c8c8c; }
.s6:after{ content:"未知"; font-size:14px; }
/* 7 变更 */
.s7{ background:#13c2c2; }
.s7:after{ content:"变更"; font-size:14px; }
/* 8 撤回 */
.s8{ background:#dc3545; }
.s8:after{ content:"撤回"; font-size:14px; }
</style>
<span class="status s{STATEID}" style="padding:5px 10px;border-radius:5px;display:inline-block;">
</span>
