首先看一下效果如下：
點擊第幾顆星星就可以亮幾顆星星哦，
HTML布局如下：
<div class="box">
<input type="radio" id="a" name="xing">
<label for="a"></label>
<input type="radio" id="b" name="xing">
<label for="b"></label>
<input type="radio" id="c" name="xing">
<label for="c"></label>
<input type="radio" id="d" name="xing">
<label for="d"></label>
<input type="radio" id="e" name="xing">
<label for="e"></label>
</div>
一個大的div里面放五個input標簽和五個label標簽，
CSS部分如下：
<style>
body{
background: black;
}
.box{
margin: 300px auto;
width: 400px;
height: 150px;
display: flex;
flex-direction: row-reverse;
}
.box input{
appearance: none;
}
.box label{
background: url("未標題-2.png") no-repeat;
width: 40px;
height: 40px;
display: block;
}
.box > input:checked ~ label{
background: url("未標題-1.png") no-repeat;
transition: 1s;
}
</style>
1） 把body標簽的背景顏色調成黑色，在box這個類里面用彈性布局 display：flex，flex-direction：row-reverse意思是主軸為水平方向，起點在右端，默認值是row，
2） 把input標簽里面的type=“radio”用appearance屬性把屬性值設定成none，
3） 把label標簽的背景設定成那張 灰色星星的背景圖片no-repeat：不重復；設定它的高寬，label標簽是一個行內元素，用display屬性把它設定成一個塊級元素 ，
4） 最后 .box > input:checked ~ label的意思是：相鄰同胞選擇器，選擇被勾選的input標簽后 所有的label標簽［input 和 label標簽有共同的父元素］；把背景設定成黃色星星的那張背景圖片，
這里普及一下：
flex-direction是一個復合屬性；它有4個值，
1）row：主軸為水平方向，起點在左端，
2）row-reverse：主軸為水平方向，起點在右端，
3）column：主軸為垂直方向，起點在上沿，
4）column-reverse：主軸為垂直方向，起點在下沿，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/262058.html
標籤：其他