本案例为课上学习成果，该文章仅作为学习总结记录，欢迎学习交流。
一、展示
二、构思
- 基本元素
- 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 -
~ （兄弟选择器）：查找某一个指定元素的 后面 的所有兄弟结点
/* 兄弟选择器 选下面所有的兄弟*/
↓ 选择所有已经被选中的名为rate的input框后面的所有名为rate的input框的伪类兄弟
input[name="rate"]:checked ~ input[name="rate"]::after
-
