CSS 非直接父选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21985161/
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 Immediate Parent Selector
提问by CMCDragonkai
Less allows one to select the parent selector (http://lesscss.org/features/#parent-selectors-feature)
Less 允许选择父选择器 ( http://lesscss.org/features/#parent-selectors-feature)
How does one get the immediate parent selector, not the root parent selector?
如何获得直接父选择器，而不是根父选择器？
回答by ScottS
A Base Example
基本示例
It partly depends upon how you structure your LESS code. There is currently no way to do this with a normal nested structure.However, take the following example, where the .grandchildis our final target in all cases (it must be the outermost level--I called this "end target grouping" in a previous answer before LESS added documentation about using &as a parent selector):
这部分取决于您如何构建 LESS 代码。目前没有办法用普通的嵌套结构来做到这一点。但是，以以下示例为例，其中.grandchild是我们在所有情况下的最终目标（它必须是最外层——我在 LESS 添加有关用作父选择器的文档之前的上一个答案中将此称为“最终目标分组” &）：
LESS
较少的
.grandchild {
grandchild: 1;
.child & {
child: 1;
.parent & {
parent: 1;
.grandparent & {
grandparent: 1;
}
}
}
}
CSS Output
CSS 输出
.grandchild {
grandchild: 1;
}
.child .grandchild {
child: 1;
}
.parent .child .grandchild {
parent: 1;
}
.grandparent .parent .child .grandchild {
grandparent: 1;
}
As you can see, any code nested in the first level only has the end target of .grandchildin its selector string. Each level one goes "down" in the nest, one is actually going "up" in selector specificity. So to target just the "immediate parent" for the selector string, place it in the .childof this example.
如您所见，任何嵌套在第一级的代码.grandchild在其选择器字符串中都只有结束目标。每个级别在嵌套中“下降”，一个实际上在选择器特异性中“上升”。因此，要仅针对选择器字符串的“直接父级”，请将其放在.child本示例的 中。
Hovers Still Work
悬停仍然有效
LESS
较少的
.grandchild {
grandchild: 1;
&:hover {
grandchildhover: 1;
}
.child & {
child: 1;
.parent & {
parent: 1;
.grandparent & {
grandparent: 1;
&:hover {
grandchildhover: 1;
}
}
}
}
}
This will add to the above css these two outputs:
这将添加到上面的 css 这两个输出：
.grandchild:hover {
grandchildhover: 1;
}
.grandparent .parent .child .grandchild:hover {
grandchildhover: 1;
}
Skip Generations
跳过世代
You can code it to skip some generations, like so:
您可以对其进行编码以跳过某些代，如下所示：
LESS
较少的
.grandchild {
grandchildonly: 1;
.child & {
withchild: 1;
.parent & {
withparentchild: 1;
}
}
.parent & {
skipgenchild: 1;
}
}
CSS Output
CSS 输出
.grandchild {
grandchildonly: 1;
}
.child .grandchild {
withchild: 1;
}
.parent .child .grandchild {
withparentchild: 1;
}
.parent .grandchild {
skipgenchild: 1;
}
Abstracted
抽象的
There are various ways this could be abstracted out, such that the code does not give the appearance of a nested look (which could confuse a user). Something like this is one way (output similar to that given in first and second examples above):
有多种方法可以将其抽象出来，这样代码就不会出现嵌套外观（这可能会使用户感到困惑）。这样的事情是一种方式（输出类似于上面第一个和第二个示例中给出的输出）：
.addParent(@parent) {
@parentescaped: e(@parent);
@{parentescaped} & {.setWithParentProps(@parent);}
}
.grandchild {
grandchild: 1;
&:hover {
grandchildhover: 1;
}
.addParent('.child');
.setWithParentProps('.child'){
child: 1;
.addParent('.parent');
}
.setWithParentProps('.parent'){
parent: 1;
.addParent('.grandparent');
}
.setWithParentProps('.grandparent'){
grandparent: 1;
&:hover {
morespecifichover: 1;
}
}
}
Final Comments
最终评论
As seven-phases-max linked to in his comment, there is talk of adding generational precision within a normal nested context. The solution given here requires one to think "opposite" of nesting, but rather think only about the element being targeted. So the way to add a .grandchildinto another selector would not be thismixin:
正如在他的评论中链接到的七阶段最大，有人谈论在正常嵌套上下文中增加分代精度。这里给出的解决方案要求人们考虑嵌套的“相反”，而只考虑目标元素。所以将 a 添加.grandchild到另一个选择器的方法不会是这个mixin：
LESS (expecting to add a parent by normal nesting)
LESS（期望通过正常嵌套添加父级）
.another-generational-parent {
.grandchild;
}
CSS Output
CSS 输出
.another-generational-parent {
grandchildonly: 1;
}
.child .another-generational-parent {
withchild: 1;
}
.parent .child .another-generational-parent {
withparentchild: 1;
}
It would be best to add it into the original code according to the proper place, but if that is not possible, then some repetition is needed (unless you set up some way in the original code to "insert" parents through creative mixin calling--I have no time to devout to that here).
最好根据适当的位置将其添加到原始代码中，但如果这是不可能的，则需要进行一些重复（除非您在原始代码中设置了某种方式以通过创造性的mixin调用“插入”父母- - 我没有时间在这里虔诚）。
.parent .child .grandchild {
.another-generational-parent & {
another-generational-parent: 1;
}
}
Whether such opposite coding can be useful or not all depends upon one's goals and desires in organizing the LESS code.
这种相反的编码是否有用完全取决于一个人在组织 LESS 代码时的目标和愿望。
