第一父节点的父选择器 [英] LESS parent selector for first parent

问题描述

有关 更改选择器订单 ，我们可以看到这个例子：

  .header {
 .menu { 
 border-radius：5px; 
 .no-borderradius& {
 background-image：url（'images / button-background.png'）; 
} 
} 
} 
  

p>

  .no-borderradius .header .menu {} 
  

如何使用父选择器 & 获取选择器 .header .menu.no-borderradius 而不重复代码：

  ul {
 li {
a {
 .active&，
&：hover {
 color：red; 
} 
} 
} 
} 
  

提供CSS

  .active ul li a {color：red;} 
  pre> 
 
 
但必需的结果是
  ul li.active a { color：red;} 
  
 
 
解决方案
 c $ c>& （父选择器）在错误的地方。它不应该放在选择器之后，而应该在之前。。设置选择器后的& 意味着整个父选择器（从最上面的选择器）将被附加在当前选择器的结尾，而不是被插入之前您需要 .header .menu.no-borderradius 或 ul li.active 。
  .header {
 .menu {
 border-radius：5px; 
& .no-borderradius {/ * here&等于.header .menu * / 
 background-image：url（'images / button-background.png'）; 
} 
} 
} 
 
 ul {
 li {
& .active，/ * here&等于ul li * / 
& {
 color：red; 
} 
} 
} 
  
 
 
 
 
 
 
关于更新问题 -  目前无法实现  ul li.active a 使用以下结构作为父选择器意味着整个链选择器直到当前级别，而不仅仅是直接父级。没有办法只选择直系亲本。
  ul {
 li {
a {
 .active& amp; 
&：hover {
 color：red; 
} 
} 
} 
} 
  
 
 
目前可以选择的选项如下：
  ul {
 li {
& active a，
a：hover {
 color：red; 
} 
} 
} 
  
 =https://github.com/less/less.js/issues/1075 =nofollow> 打开要素请求 ，以便父选择器具有目标，但没有决定何时完成。
 
From documentation about changing selector order we can see this example:
.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}
and result will be 
.no-borderradius .header .menu {}
How to use parent-selector & to get selector .header .menu.no-borderradius without duplicating code:
ul {
    li {
        a {
            .active &,
            &:hover {
                 color: red;
            }
        }
    }
}
will provide CSS
.active ul li a {color: red;}
but required result is
ul li.active a {color: red;}

解决方案
You have put the & (parent selector) at the wrong place. It shouldn't be put after the selector, instead it should be before the .. Setting the & after the selector means the whole parent selector (from the topmost selector) will be appended at the end of the current selector instead of getting inserted before (which is what you need for .header .menu.no-borderradius or ul li.active.
.header {
  .menu {
    border-radius: 5px;
    &.no-borderradius { /* here & is equal to .header .menu */
      background-image: url('images/button-background.png');
    }
  }
}

ul {
  li {
    &.active, /* here & is equal to ul li */
    &:hover {
      color: red;
    }
  }
}




Regarding the update to the question - it is currently not possible to achieve ul li.active a using the below structure as parent selector means the entire chain of selectors till the current level and not just the immediate parent. There is no way to just pick the immediate parent.
ul {
  li {
    a {
      .active &,
      &:hover {
        color: red;
      }
    }
  }
}
The only option currently possible is to write it like below:
ul {
  li {
    &.active a,
    a:hover {
      color: red;
    }
  }
}
There is an open feature request for parent selectors to have targets but there is no decision on by when this would be done.

                        
这篇关于第一父节点的父选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！