当前第2页 返回上一页
在 css 中经常会用到子代选择器，效果可能是这样的：
1 2 3 4 5 | .container {
width: 1024px;}.container > .row {
height: 100%;}.container > .row a {
color: #f40;}.container > .row a:hover {
color: #f50;}
|
上面的代码嵌套了很多层，写起来很繁琐。可如果用 less 的嵌套语法来写这段代码，就比较简洁。
嵌套的举例如下：
1 2 | main.less:
.container { width: @containerWidth; > .row { height: 100%; a { color: #f40; &:hover { color: #f50; } } } div { width: 100px; .hello { background-color: #00f; } }}
|
将上面的less文件编译为 css 文件后，自动生成的代码如下：
1 2 | main.css
.container { width: 1024px;}.container > .row { height: 100%;}.container > .row a { color: #f40;}.container > .row a:hover { color: #f50;}.container div { width: 100px;}.container div .hello { background-color: #00f;}
|
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
JavaScript里最常用的20条正则表达式
vscode的常用设置
10进制数如何转为16进制
JS如何实现自定义鼠标右击菜单
以上就是CSS预处理器之Less详解的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
如何使用css对td中input的宽度设置
html+css+jquery做选项卡
前端项目开始制作前初始化css必要性
sass与scss之间的区别是什么
怎么用css设置记录用户密码
html、css和js的注释规范用法有哪些
怎样让前端界面自动清理js、css文件的缓存
用css3实现打点效果实例讲解
怎样用css3制作登录框
less是什么
更多相关阅读请进入《sass》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS预处理器之Less详解
