less-css -- 有可能得到父母的父母吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17286742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
less-css -- is it possible to get a parent's parent?
提问by chovy
Is it possible to get a parent's parent?
有可能得到父母的父母吗？
I tried & & { }but that didn't work.
我试过了，& & { }但这没有用。
I'm trying to style a child element based on it's grandparent.
我正在尝试根据它的祖父元素来设置子元素的样式。
回答by ScottS
Depends on Code Structure, and may Require Some Repetition of Code
取决于代码结构，并且可能需要一些代码重复
You cannot do it directly in most cases (see second example for exception).
在大多数情况下，您不能直接执行此操作（有关例外，请参见第二个示例）。
If Grandparent is an element
如果祖父母是一个元素
This requires some repetition, but does allow for the grandparent to not be the outermost wrapper (so there could be a great grandparent).
这需要一些重复，但允许祖父母不是最外层的包装器（因此可能有曾祖父母）。
LESS
较少的
grandparent {
/* grandparent styles */
parent {
/* parent styles */
child {
/* child styles */
}
}
&.specialGrandpa {
child {
/* child styles with special Grandpa */
}
}
&.specialGrandma {
child {
/* child styles with special Grandma*/
}
}
}
CSS Output
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*/
}
If Grandparent is a class, ID, etc., and is the outermostwrapper
如果祖父母是一个类、ID 等，并且是最外层的包装器
No repetition involved here, but you cannot have a great grandparentin the mix. Also this is only for LESS 1.3.1+ version (earlier version incorrectly add a space):
这里不涉及重复，但你great grandparent不能混合。此外，这仅适用于 LESS 1.3.1+ 版本（早期版本错误地添加了一个空格）：
LESS
较少的
.grandparent {
/* grandparent styles */
.parent {
/* parent styles */
.child {
/* child styles */
.specialGrandparent& {
/* child styles with special grandparent*/
}
}
}
}
CSS Output
CSS 输出
.grandparent {
/* grandparent styles */
}
.grandparent .parent {
/* parent styles */
}
.grandparent .parent .child {
/* child styles */
}
.specialGrandparent.grandparent .parent .child {
/* child styles with special grandparent*/
}
This code works by appending to the "front" of the grandparent selector, so that is why the grandparent must be a class, ID, or other selector itself.
此代码通过附加到祖父选择器的“前面”来工作，这就是为什么祖父必须是类、ID 或其他选择器本身的原因。
Addendum
附录
Based on comment about desire to have a red background when the spanis empty. This does not put the background on the parent, but "fakes" it using the child.
基于关于当span为空时希望拥有红色背景的评论。这不会将背景放在父级上，而是使用子级“伪造”它。
span:empty:after {
content: '';
position: absolute;
top: -1px;
right: -10px;
left: -1px;
bottom: -10px;
display: block;
background-color: red;
z-index: -1;
}
回答by Andrevinsky
You cannot traverse arbitrarily up the DOM with less selectors. Use javascript instead.
您不能使用较少的选择器任意向上遍历 DOM。改用 javascript。
The &in less stands for declared selector one level up. A shortcut for already defined rule. As opposed to what you allegedly seek.
将&在更短的代表宣布了一个选择水平。已定义规则的快捷方式。与您所谓的寻求相反。
回答by itsmikem
According to LESS's parent selectors feature, it's possible to change selector orderby putting the &afterthe items in your nest, thereby accessing the item's parent's parent.
根据 LESS 的父选择器功能，可以通过将后面的项目放在嵌套中来更改选择器顺序，从而访问项目的父项的父项。&
LESS code:
少代码：
span {
color:red;
h6 & {
color:white;
div & {
color:blue;
}
}
}
CSS result:
CSS 结果：
span {
color: red;
}
h6 span {
color: white;
}
div h6 span {
color: blue;
}
回答by Meligy
You can use a mixin, then you can pass variables to it based on grandparent selector specifics.
您可以使用 mixin，然后您可以根据祖父选择器的细节将变量传递给它。
Example:
例子：
ul {
.color-links(@color) {
li a { // any link inside a child li
color: @color;
}
}
&.red {
.color-links(#ff0000);
}
&.green {
.color-links(#00ff00);
}
}
