“别瞧不起页面仔，你真的能玩转页面？”
css其强大的选择器，看的时候觉得so easy，真真玩起来的时候如果不得心应手，会让我浑身不爽。写一下五星评价的样式，主要是复习一下选择器以及各种方法实现的优缺点。
1，E~F选择+左右浮动+webkit-appearance+pointer-events注意伪input写上name
*注意：
给input加上name，亲测不加name有点浏览器不能点击，养成良好的代码习惯。
原理其实是浮动与反浮动控制星星，比如12345左浮动是12345，右浮动就变成54321.
这种方法结构最简单：无任何额外标签
<div class="demo">
<div class="star">
<input type="radio" name="star_demo">
<input type="radio" name="star_demo">
<input type="radio" name="star_demo">
<input type="radio" name="star_demo">
<input type="radio" name="star_demo">
</div>
</div>
div.demo {
width: 100px;
height: 20px;
overflow: hidden;
/*clear float*/
}
div.star {
float: left;
}
div.star input {
width: 20px;
height: 20px;
background: url(./img/star_sprite.png) no-repeat 0 -32px;
-webkit-appearance: none;
border-width: 0;
border-style: solid;
float: right;
outline: 0 none;
-webkit-transition: all .3s ease-out;
opacity: .3;
}
div.star input:hover,
div.star input:checked,
div.star input:checked~input {
background-position: 0 0;
opacity: 1;
}
2，E~+F选择+checked
这种方法通过 input 的 :checked 直接展示选中的星星数量
层级多了注意堆放的顺序，还有绝对相对定位以及浮动的元素后变成块元素，不管原来是什么元素。都是细节
E+F选择器功能很强大，也可以用nth-child和nth-of-type选择器玩。
input+input选中第二个input，input+input+input选中第三个input，input~input选中第二个后面的所有input。
html结构：
<div class="demo2">
<input type="radio" name="demo2">
<input type="radio" name="demo2">
<input type="radio" name="demo2">
<input type="radio" name="demo2">
<input type="radio" name="demo2">
<span class="star_rotate"></span>
</div>
样式：
span.star_rotate {
position: absolute;
top: 0;
left: -100px;
background-color: #ccc;
width: 100px;
height: 20px;
border-left: 100px solid red;
border-right: 100px solid green;
z-index: 2;
}
.demo2 {
width: 100px;
height: 20px;
position: relative;
background: #ccc;
overflow: hidden;
}
.demo2::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 20px;
background: url(./img/star_rating.png) 0 0 no-repeat;
pointer-events: none;
z-index: 7777;
}
.demo2 input {
background: none;
float: left;
position: relative;
width: 20px;
height: 20px;
-webkit-appearance: none;
border: 0 none;
outline: 0 none;
z-index: 3;
}
.demo2 input:checked~.star_rotate {
right: 80px;
left: auto;
}
.demo2 input+input:checked~.star_rotate {
right: 60px;
}
.demo2 input+input+input:checked~.star_rotate {
right: 40px;
}
.demo2 input+input+input+input:checked~.star_rotate {
right: 20px;
}
.demo2 input+input+input+input+input:checked~.star_rotate {
right: 0px;
}
.demo2 input:hover~.star_rotate {
left: -80px;
}
.demo2 input+input:hover~.star_rotate {
left: -60px;
}
.demo2 input+input+input:hover~.star_rotate {
left: -40px;
}
.demo2 input+input+input+input:hover~.star_rotate {
left: -20px;
}
.demo2 input+input+input+input+input:hover~.star_rotate {
left: 0px;
}
3，a标签中的锚点跳转结合:target选择符方式实现
注意：a#target表示访问a后所产生的样式。
通过这样的思路可以实现点击哪个星星就显示样式。
<div class="demo3">
<a href="#zww1"></a>
<a href="#zww2"></a>
<a href="#zww3"></a>
<a href="#zww4"></a>
<a href="#zww5"></a>
<span class="demo3_star" id="zww1"></span>
<span class="demo3_star" id="zww2"></span>
<span class="demo3_star" id="zww3"></span>
<span class="demo3_star" id="zww4"></span>
<span class="demo3_star" id="zww5"></span>
</div>
div.demo3 {
width: 100px;
height: 20px;
position: relative;
overflow: hidden;
background: #ccc;
}
div.demo3:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 20px;
background: url(./img/star_rating.png) 0 0 no-repeat;
pointer-events: none;
}
div.demo3 a {
text-decoration: none;
position: relative;
float: left;
width: 20px;
height: 20px;
overflow: hidden;
}
div.demo3 .demo3_star {
position: static;
display: none;
width: 0;
border: 0 none;
background-color: #f32600;
height: 0;
}
div.demo3 span#zww1:target {
display: block;
width: 20px;
height: 20px;
}
div.demo3 span#zww2:target {
display: block;
width: 40px;
height: 20px;
}
div.demo3 span#zww3:target {
display: block;
width: 60px;
height: 20px;
}
div.demo3 span#zww4:target {
display: block;
width: 80px;
height: 20px;
}
div.demo3 span#zww5:target {
display: block;
width: 100px;
height: 20px;
}
当然还有更多的实现方式，小志哥博客也有说到：http://linxz.github.io/CSS_Skills/demo/picture/star_rating.html###
现在玩前端的都是整什么框架，玩什么高大上的react angularJs，真的是兴趣还是金钱？。但是，请你不要瞧不起页面仔，保持学习的心态，不卑不亢，不断前行把！
