CSS3+背景图片：评星
2012年10月9日
很久没写技术帖了。写起来太费神，深了不是浅了不是的。
前几天写了一个给课程评定星级的效果，主要使用了CSS3新增伪类[:checked]和CSS2的相邻选择器。
- E:checked
- 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
- IE8及以前版本不支持
- E+F
- 相邻选择符(Adjacent sibling combinator)
- 选择紧贴在E元素之后F元素。
- IE6及以前版本不支持
为了节约我的脑细胞，同时调动大家动手的能力，本例不做IE的兼容，请自行处理。
基本的结构为：
<form id="testForm" name="testForm" action="#">
<fieldset>
<legend>评定星级</legend>
<div class="star-set">
<ul class="stars">
<li class="star-1"><label><input type="radio" name="star" value="1" /><span class="star-icon">1</span></label></li>
<li class="star-2"><label><input type="radio" name="star" value="2" /><span class="star-icon">2</span></label></li>
<li class="star-3"><label><input type="radio" name="star" value="3" /><span class="star-icon">3</span></label></li>
<li class="star-4"><label><input type="radio" name="star" value="4" /><span class="star-icon">4</span></label></li>
<li class="star-5"><label><input type="radio" name="star" value="5" /><span class="star-icon">5</span></label></li>
</ul>
<div class="star-reset"><label><input type="radio" name="star" value="0" /><span>重选</span></label></div>
</div>
</fieldset>
</form>
本例中，采用背景图来实现星星的显示。背景图片的宽度，为1个星加上其右边间距的总宽度，本例为25px。
首先是给[.stars]设定固定宽度和背景，背景就是没有评定星级时的样子，例如一个中空的星星。
[.stars]的宽度=5(个星)*背景图片宽度。
[li]采用了绝对定位，将其叠加在一起，每个[li]的宽度，分别是1星～5星的宽度。要注意设定[li]的z-index，使[.star-1]在最上，而[.star-5]在下面。
然后使用[:checked]来设定其相邻的[.star-icon]的背景为选定时的样子。
关键的CSS为：
.stars input:checked + .star-icon {......}/*选中的input元素的相邻元素。*/
关键是input:checked + .star-icon，嘻嘻，还有猫猫的想法。