本案例为课上学习成绩，该文章仅作为学习总结记录，欢送学习交换。
一、展现
二、构思
根本元素
- input单选框 + 伪类
- 空星+选中后的星 —> iconfont
实现成果
- 鼠标悬停成果
- 点击成果
- 以上两个成果产生时联动其后面的星星产生雷同的成果
三、实现
- html局部双层结构（rate-content+radio*5）
<div class="rate-content"> <input type="radio" name="rate"> <input type="radio" name="rate"> <input type="radio" name="rate"> <input type="radio" name="rate"> <input type="radio" name="rate"> <!-- 具备雷同name的单选框只能选一个 --> </div>- css局部（input(radio)+::before&after+input(radio):checked+hover）
/* 打消单选框默认款式 */ input { appearance: none; border: none; outline: none; cursor: pointer; } .rate-content { display: flex; /*弹性容器，按比例继承宽高*/ flex-flow: row-reverse; /*元素反向排列*/ float:left; margin-top: 200px; margin-left: 200px; } /* 选中所有为name属性的选择器 */ input[name="rate"] { font-family: "iconfont"; font-size: 30px; padding-right: 10px; transition: all 0.4s ease; /*元素变动的过渡工夫*/ } input[name="rate"]::after { content:"\f2d3"; color: #999; } input[name="rate"]:checked::after{ content:"\e61a"; color: #ffa822; } input[name="rate"]:hover{ transform: scale(1.2); /*缩放*/ } input[name="rate"]:hover::after{ content:"\e61a"; color: #ffa822; } /* 兄弟选择器 选上面所有的兄弟*/ input[name="rate"]:checked ~ input[name="rate"]::after { content:"\e61a"; color: #ffa822; } input[name="rate"]:hover ~ input[name="rate"]::after { content:"\e61a"; color: #ffa822; }### 四、总结
- 革除元素的款式的三个属性
{ appearance: none; border: none; outline: none;}flex布局
与兄弟选择器配合应用：兄弟选择器抉择的是某元素前面的选择器，而
flex-flow: row-reverse让其排列到后面达到所需成果display: flex; /*弹性容器，按比例继承宽高*/flex-flow: row-reverse; /*元素反向排列*/属性选择器
- 根本应用
input[name="rate"]示意选中所有为name属性的选择器 - 属性选择器+伪类
input[name="rate"]::after - 属性选择器+伪类+状态
input[name="rate"]:checked::after 属性选择器+:hover
- 达到缩放成果
- 与选中成果统一
- 根本应用
``input[name="rate"]:hover``- ~ （兄弟选择器）：查找某一个指定元素的 <u>前面</u> 的所有兄弟结点
/ 兄弟选择器 选上面所有的兄弟/
↓ 抉择所有曾经被选中的名为rate的input框前面的所有名为rate的input框的伪类兄弟
input[name="rate"]:checked ~ input[name="rate"]::after