Less学习笔记--Nestedrules(嵌套规则)-创新互联
Less嵌套规则模仿了HTML结构,这样写可以让代码更简洁、更具层次感,上一小段代码先了解下
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的伊金霍洛网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!Less代码:
#header{ color:black; .navigation{ font-size:12px; } .logo{ width:300px; } }
CSS编译代码:
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
使用这种方法也可以在混合中包含伪类,常见的用法就是css reset里面的清除浮动
Less代码:
.clearfix{ zoom:1; &:after{ content:''; display:block; clear:both; } }
CSS编译代码:
.clearfix { zoom: 1; } .clearfix:after { content: ''; display: block; clear: both; }
其中,&运算符表示一个嵌套规则的父选择器,常用于修改一个类或者定义伪类选择器,比如:
Less代码:
a{ color:blue; &:visited{ color:red; } &:hover{ color:yellow } }
CSS编译代码:
a { color: blue; } a:visited { color: red; } a:hover { color: #ffff00; }
在上面清除浮动的代码中,如果不加&,会是什么效果呢?
Less代码:
.clearfix{ zoom:1; :after{ content:''; display:block; clear:both; } }
CSS编译代码:
.clearfix { zoom: 1; } .clearfix :after { content: ''; display: block; clear: both; }
不难发现,这是一个典型的后代选择器,并不是我们想要的效果
&选择符的另一个非常重要的用途就是生产重复的类名,比如在写CSS公共样式的时候会有各种各样的button样式
Less代码:(在这里复习下less中引入路径的写法)
@p_w_picpaths:'../p_w_picpaths'; .button{ &-ok{ background:url('../p_w_picpaths/1.jpg') } &-cancel{ background:url('@{p_w_picpaths}/2.jpg') } &-custom{ background:url('@{p_w_picpaths}/3.jpg') } }
CSS编译代码:
.button-ok { background: url('../p_w_picpaths/1.jpg'); } .button-cancel { background: url('../p_w_picpaths/2.jpg'); } .button-custom { background: url('../p_w_picpaths/3.jpg'); }
&选择符可以在选择器中多次出现,反复引用父选择器,而不是重复父选择器的类名
Less代码:
.link{ &+&{ color:red; } & &{ color:purple; } &&{ color:silver; } &, &ish{ color:pink; } }
CSS编译代码:
.link + .link { color: red; } .link .link { color: purple; } .link.link { color: silver; } .link, .linkish { color: pink; }
&选择符表示所有的父选择器,而不是特指最近的父选择器
Less代码:
.grand{ .parent{ &>&{ color:red; } & &{ color:green; } &&{ color:blue; } &,&ish{ color:black; } } }
CSS编译代码:
.grand .parent > .grand .parent { color: red; } .grand .parent .grand .parent { color: green; } .grand .parent.grand .parent { color: blue; } .grand .parent, .grand .parentish { color: black; }
&选择符还可以用于生成一个逗号分割列表的所有可能的选择器排列
Less代码:
p, a, ul, li { border-top: 2px dotted #366; & + & { border-top: 0; } }
CSS编译代码:
p, a, ul, li { border-top: 2px dotted #366; } p + p, p + a, p + ul, p + li, a + p, a + a, a + ul, a + li, ul + p, ul + a, ul + ul, ul + li, li + p, li + a, li + ul, li + li { border-top: 0; }
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
当前标题:Less学习笔记--Nestedrules(嵌套规则)-创新互联
当前链接:http://myzitong.com/article/cshops.html