html
<ul class="mingxing">
<li class="huge">胡歌</li>
<li class="huge">江疏影</li>
</ul>
css
.mingxing{
.huge {
margin-bottom: 10px;
&:last-child {
color: red;
}
}
}
另一种写法
.mingxing{
.huge {
margin-bottom: 10px;
&:nth-child(2) {
color: green;
}
}
}
鼠标移入li元素
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 4px;
border-radius: 4px;
margin-bottom: 6px;
cursor: pointer;
&:hover {
background: #E8EFFA;
}
}
.active类名的伪元素
.active {
background: #E8EFFA;
&:after {
content: "√";
width: 16px;
height: 16px;
line-height: 16px;
color: #fff;
text-align: center;
background: #1890FC;
opacity: 1;
border-radius: 8px;
}
}
沉淀自己