是否可以得到父母的父母?
我试过& & { }
了,但没有用。
我正在尝试根据其祖父母设置子元素的样式。
在大多数情况下,您不能直接执行此操作(有关例外情况,请参见第二个示例)。
如果祖父母是一个元素
这需要一些重复,但确实允许祖父母不是最外层的包装器(因此可能有曾祖父母)。
较少的
grandparent {
/* grandparent styles */
parent {
/* parent styles */
child {
/* child styles */
}
}
&.specialGrandpa {
child {
/* child styles with special Grandpa */
}
}
&.specialGrandma {
child {
/* child styles with special Grandma*/
}
}
}
CSS 输出
grandparent {
/* grandparent styles */
}
grandparent parent {
/* parent styles */
}
grandparent parent child {
/* child styles */
}
grandparent.specialGrandpa child {
/* child styles with special Grandpa */
}
grandparent.specialGrandma child {
/* child styles with special Grandma*/
}
如果Grandparent 是一个类、ID 等,并且是最外层的包装器
这里不涉及重复,但你不能有一个great grandparent
混合。此外,这仅适用于 LESS 1.3.1+ 版本(早期版本错误地添加了空格):
较少的
.grandparent {
/* grandparent styles */
.parent {
/* parent styles */
.child {
/* child styles */
.specialGrandparent& {
/* child styles with special grandparent*/
}
}
}
}
CSS 输出
.grandparent {
/* grandparent styles */
}
.grandparent .parent {
/* parent styles */
}
.grandparent .parent .child {
/* child styles */
}
.specialGrandparent.grandparent .parent .child {
/* child styles with special grandparent*/
}
此代码通过附加到祖父母选择器的“前面”来工作,这就是为什么祖父母必须是类、ID 或其他选择器本身的原因。
附录
基于关于希望在span
空时具有红色背景的评论。这不会将背景放在父母身上,而是使用孩子“伪造”它。
span:empty:after {
content: '';
position: absolute;
top: -1px;
right: -10px;
left: -1px;
bottom: -10px;
display: block;
background-color: red;
z-index: -1;
}
你不能用更少的选择器任意向上遍历 DOM。改用javascript。
in less 代表声明的&
选择器上一级。已定义规则的快捷方式。与您所寻求的相反。
根据 LESS 的父选择器功能,可以通过在嵌套中放置项目来更改选择器顺序,从而访问项目的父项的父项。&
更少的代码:
span {
color:red;
h6 & {
color:white;
div & {
color:blue;
}
}
}
CSS结果:
span {
color: red;
}
h6 span {
color: white;
}
div h6 span {
color: blue;
}
您可以使用 mixin,然后您可以根据祖父母选择器的细节将变量传递给它。
例子:
ul {
.color-links(@color) {
li a { // any link inside a child li
color: @color;
}
}
&.red {
.color-links(#ff0000);
}
&.green {
.color-links(#00ff00);
}
}