在less中将Pseudo类添加到父祖先(选择器)

Ani*_*Ani 2 css css-selectors css3 less

有没有办法可以从嵌套子中向父元素添加伪类. 仅使用CSS

示例:在.less文件中,这就是我所拥有的.

.collection {
  // Some styling
    .headingRow {
        //Some styling
        .heading{
           //Some styling
           // This is where i want it to add the styling for alternate .collection class

         }
     }
 }
Run Code Online (Sandbox Code Playgroud)

这就是我想要的输出

.collection:nth-of-type(2n+1) .headingRow .heading 
{
    background-color:  #7a003d; 
}
.collection:nth-of-type(2n) .headingRow .heading
{
    background-color:  #322f31;
}
Run Code Online (Sandbox Code Playgroud)

这就是我尝试的 - &从.heading类添加,我可以使用类似的东西添加父元素或类

    .collection {
  // Some styling
    .headingRow {
        //Some styling
        .heading{
           div&
           // This results in div.collection .headingRow .heading { }
         }
     }
 }
Run Code Online (Sandbox Code Playgroud)

有没有办法可以将Pseudo类添加到父祖先?

sev*_*max 7

像这样的东西:

.collection {
    // ...
    .headingRow {
        // ...
    }
}

.headingRow .heading {
    .collection 
        & {background-color: red}
    .collection:nth-of-type(2n) 
        & {background-color: blue}
    .collection:nth-of-type(2n + 1)
        & {background-color: green}
}
Run Code Online (Sandbox Code Playgroud)

虽然我认为它没有任何方式比简单的旧CSS更像定义没有任何嵌套.

  • 那么,你要写的东西取决于你需要得到什么.显然,如果你需要*不同的*样式用于*不同的*`collection`后代,你必须以某种方式编写这些样式.使用[`mixins`](http://lesscss.org/features/#mixins-parametric-feature)和/或[`extend`](http://lesscss.org/features/#extend-feature)来最小化重复代码(如果有的话).例如,参见http://stackoverflow.com/questions/23551080(它实际上非常类似于生成的类而不是`color`后缀,你需要`nth-of-type(2n + @i)`one) . (3认同)