SCSS中的伪类元素

最新推荐文章于 2025-06-24 17:21:05 发布

Taoika

最新推荐文章于 2025-06-24 17:21:05 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： scss 前端

本文链接：https://blog.csdn.net/hello_helloworld/article/details/131764847

在SCSS中，使用伪类如`:hover`和`::after`时，需在前面加上`&`来确保它们应用到目标元素上。未加`&`可能导致伪类作用于子孙元素。例如，`&:hover`用于添加悬停效果，而`&::after`常用于点击事件定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
    }
}