<style type="text/css" >
<ul class="support-type">
<li style="list-style-type:none;"><span class="support">浅绿</span> = 支持</li>
<li style="list-style-type:none;"><span class="unsupport">红色</span> = 不支持</li>
<li style="list-style-type:none;"><span class="partsupport">粉色</span> = 部分支持</li>
.support-type{zoom:1;overflow:hidden;}</style>
.support-type li{float:left;padding:0 10px 10px 10px;}
.support-type li span{display:inline-block;overflow:hidden;width:25px;height:14px;font-size:0;line-height:0;color:rgba(0,0,0,0);
vertical-align:middle;}
.support-info{list-style-type:decimal;padding:10px 2em 0 2em;}
.support-info li:target{background-color:#fff2bf;text-shadow:1px 1px 1px rgba(255,255,255,.5);}
.support{background:#90FF90;}
.unsupport{background:#FF9090;}
.partsupport{background:#fdd;}
<ul class="support-type">
<li style="list-style-type:none;"><span class="support">浅绿</span> = 支持</li>
<li style="list-style-type:none;"><span class="unsupport">红色</span> = 不支持</li>
<li style="list-style-type:none;"><span class="partsupport">粉色</span> = 部分支持</li>
</ul>