首页 工作时间 9:00-17:30 关注我们
当前位置:首页 > 建站百科 > 建站知识 >

快速开发CSS的利器 - less 嵌套规则

来源: 九度工作室 阅读:次 时间:17-11-29 11:07

快速开发CSS的利器 - less 嵌套规则 less 嵌套规则

嵌套,在我们HTML代码中一直都在使用,如div中的p元素等,对于我们样式的书写,需要使用div p {} 进行样式的指定,这也就是我们的后代选择器。不过写过项目的人都知道,为了防止样式的覆盖,每种选择器都是一大长串,写起来很麻烦~

less利用嵌套的书写方式,让我们在写后代选择器的时候有了新的方法。原来后代选择器的书写方式:

.arclist dl {
    padding: 10px 20px;
    border-bottom: 1px dotted #ccc;
}
.arclist dl:after {
    .common-clearfloat;
}
.arclist dt {
    float: left;
    width: 120px;
    height: 120px;
}
通过嵌套的方式书写样式的方法:

.arclist {
    dl {
        padding: 10px 20px;
        border-bottom: 1px dotted #ccc;
        &:after {
            .common-clearfloat;
        }
        dt {    
            float: left;
            width: 120px;
            height: 120px;
        }
    }
}