SCSS中的伪类元素_scss伪元素

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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16