Less-层级结构

最新推荐文章于 2024-10-31 19:00:00 发布

「已注销」

最新推荐文章于 2024-10-31 19:00:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： css预处理器 web前端开发文章标签： less 层级结构

本文链接：https://blog.youkuaiyun.com/weixin_44713430/article/details/102239703

web前端开发同时被 2 个专栏收录

122 篇文章

订阅专栏

css预处理器

10 篇文章

订阅专栏

这篇博客探讨了Less预处理器中关于层级结构的处理方式。内容指出，在Less选择器内部定义其他选择器会自动转换为后代选择器。同时，文章介绍了&符号的用途，它用于指示在编译时将紧跟其后的选择器与当前选择器直接拼接，避免生成后代选择器，从而简化CSS输出。

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

如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
例如以下代码: .box1 .son
&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可

.box1 {
    width: 400px;
    height: 300px;
    position: relative;
    background-color: pink;
    margin-bottom: 20px;
    /* 如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器
    例如以下代码: .box1 .son */
    .son {
    /* 这里的&的作用, 是告诉less在转换的时候不用用后代来转换, 
    直接拼接在当前选择器的后面即可 */
        &:hover {
            background-color: skyblue;
        }
        width: 300px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #f5f5f5;
    }
}

.box2 {
    width: 400px;
    height: 300px;
    background-color: skyblue;
    position: relative;
    .son {
        &::after {
            content: '胡歌';
            display: block;
            width: 150px;
            height: 90px;
            background-color: pink;
        }
        width: 300px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #f5f5f5;
    }
}

在这里插入图片描述