首页 > 代码库 > less-符号之逗号,空格,父级选择器
less-符号之逗号,空格,父级选择器
Less符号
逗号
example: .test() { box-shadow+: inset 0 0 10px #555; } .study { .test(); box-shadow+: 0 0 20px black; } //output css .study { box-shadow: inset 0 0 10px #555, 0 0 20px black; }
属性后跟“ + ”,就是“ , ”
空格
example: .test() { transform+_: scale(2); } .study { .test(); transform+_: rotate(15deg); } //output css .study { transform: scale(2) rotate(15deg); }
属性后跟“ +_ ”,就是空格
“ & ”父级选择器
example 1: a { color: blue; &:hover { color: green; } } //output css a { color: blue; } a:hover { color: green; }
example 2: .test{ &-complete{ background-color:red; } &-undone{ background-color:blue; } &-normal{ background-color:pink; } } //output css .test-complete { background-color: red; } .test-undone { background-color: blue; } .test-normal { background-color: pink; }
example 3: .link { & + & { color: red; } & & { color: green; } && { color: blue; } &, &ing { color: cyan; } } //output css .link + .link { color: red; } .link .link { color: green; } .link.link { color: blue; } .link, .linking { color: cyan; }
example 4:(改变选择器顺序) .test{ .study{ border:1px solid #ff6a00; .menus &{ font-size:12px; color:#ff0000; } } } //output css .test .study { border: 1px solid #ff6a00; } .menus .test .study { font-size: 12px; color: #ff0000; }
example 5:(组合迸发) ul,li,a{ font-size:16px; & + &{ margin-right:5px; } } //output css ul, li, a { font-size: 16px; } ul + ul, ul + li, ul + a, li + ul, li + li, li + a, a + ul, a + li, a + a { margin-right: 5px; }
组合迸发会将你选中的选择器的所有可能组合全部选中并编译输出。
作者:leona
原文链接:http://www.cnblogs.com/leona-d/p/6322425.html
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
less-符号之逗号,空格,父级选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。