SCSS中的伪类元素
伪类
在某个元素身上添加伪类元素,无论是::after,还是:hover,都得在前面加上一个&,具体原因我也不是很清楚。
实际开发过程中是这样的,当我直接用::after添加到该元素身上的时候,我就发现,那个伪类找不到了,经过一番查找,发现该伪类被添加到了该元素的子孙元素中去了。
在加上了&后,该伪类如愿地加到了该元素上面了
示例如下:
.icon { // 操作icon
&:hover {
border-radius: 3px;
background-color: rgba(0,0,0,.1);
}
&::after { // 这个伪类是用来确保点击事件的target指向该icon而不是icon里面的什么
content: "";
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
background-color: rgba(255, 255, 255, 0);
}
}