大家一起学习less 2:嵌套规则
2012-09-13 16:39
295 查看
还是先看示例
就是一个CSS表达式,如果它拥有层级关系,我把可以父级的表达式提出来,从而实现表达式名字的重用!实际生成的表达式名是“父级”+“ ”+"子级",中间的空白是后代选择器。
我们可以留意到& 这个符号,它是直接跟在父级表达式上,中间的后代选择器没有了!
// LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } /* 生成的 CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
就是一个CSS表达式,如果它拥有层级关系,我把可以父级的表达式提出来,从而实现表达式名字的重用!实际生成的表达式名是“父级”+“ ”+"子级",中间的空白是后代选择器。
我们可以留意到& 这个符号,它是直接跟在父级表达式上,中间的后代选择器没有了!
// LESS .bordered { &.float { float: left; } .top { margin: 5px; } } /* 生成的 CSS */ .bordered.float { float: left; } .bordered .top { margin: 5px; }
相关文章推荐
- 大家一起学习less 2:自带函数
- 大家一起学习less 6:一些有用的混合函数
- 大家一起学习less 1:混合
- Less学习笔记 -- Nested rules (嵌套规则)
- 大家一起学习less 3:命名空间
- 大家一起学习less 4:作用域
- 大家一起学习less 5:字符串插值
- 欢迎大家一起学习
- LESS 让css也支持变量,运算符,include,嵌套规则等等
- 好久没有写blog了,可写的东西还是很多的,慢慢的写出来吧,与大家一起共同学习
- 未来美好憧憬:计算机之路漫漫兮,悠悠载,希望到研究生的时候能够组成一个大家自己的团队,一起学习,开发,研究...
- 手机开发初学者,留个脚印吧,大家一起学习!
- 大家了解纸箱包装设备吗?下面让我们一起学习一下吧!
- 和大家一起学习LUA(1)【关于LUA】
- 今天开通了CSDN博客,希望能结识更多的朋友,大家一起学习交流!
- 人贵坚持,大家共同学习,一起努力前行!
- 和孩子一起学习python之变量命名规则
- java按行读取文件,可做模板(简单易懂),大家一起学习
- less 嵌套规则、运算、函数、命名空间
- 最近笔试面试,狂考sizeof ,大家一起学习