less-符号之逗号，空格，父级选择器
2024-10-09 09:28:27
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
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
最新文章
- [js开源组件开发]loading加载效果
- 理解button标签的默认行为
- json不转化值是null的字段
- 关于xcode不同版本打开相同工程问题
- jstl的mavin依赖
- java之IO
- Linux 下memcache安装及使用
- storyBoard中的Segue跳转
- Repeater绑定数据库
- C# Best Practices - Handling Strings
- JS+CSS简单实现DIV遮罩层显示隐藏
- IntelliJ IDEA（六） ：Settings（下）
- C#中try catch finally的执行顺序
- Sql Server索引重建
- Berlekamp-Massey算法学习笔记
- WIN10+ VS2013 配置Opencv2413 64位
- Architecture.SOLID-Principles
- 论文阅读 | Clustrophile 2: Guided Visual Clustering Analysis
- CentOS下yum安装mcrypt错误：No package php-mcrypt available.解决方法
- C语言基础:初级指针 分类： iOS学习 c语言基础 2015-06-10 21:50 30人阅读 评论(0) 收藏