快速开发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;
        }
    }
}

---

更多搜索： 本文无需标签！

您阅读这篇文章共花了： 

温馨提示：民间偏方秘方仅用于中医爱好者研究学习,未经专业人员指导切勿乱用！

博主简介：少林寺习武3年，中医世家，对玄学有一定的研究。在线人数：31人

需要相关资料请加博主微信

中医玄学交流加微信：hbxt998

---

赞 3

微信分享提示：①点击右上角的【∶】，②再点击【发送给朋友】或【分享到朋友圈】，让精彩传递！

HTML5 CSS3旋转放大特效代码

自适应布局-布局神器display:table-cell

相关文章

• 2019新版前端与移动开发学习路线图（视频+工具+书籍+资源）
• 【网站建设】超清爽的几款CSS网页配色方案
• 自适应布局-布局神器display:table-cell
• php网页输入密码才能访问里面的内容
• Bootstrap用户界面架构视频教程
• 纯css3云彩动画效果
• H5如何布局？入门篇…
• PS抠图的十种常用方法
• 快速开发CSS的利器 - less 嵌套规则
• 电脑提速宽带加速 清理电脑垃圾清理方法

本文作者：静月山人     文章标题： 快速开发CSS的利器 - less 嵌套规则
本文地址：https://www.919941.com/web/185.html 本文已被百度收录
版权声明：若无注明，本文皆为“静月山人博客”原创，转载请保留文章出处。

取消回复

  昵称  邮箱