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

Question

有没有一种方法可以将伪类添加到嵌套子元素的父元素中。仅使用 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

         }
     }
 }

这就是我想要的输出

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

这是我尝试过的 - 从 .heading 类添加 &，我可以使用类似

的东西添加父元素或类

    .collection {
  // Some styling
    .headingRow {
        //Some styling
        .heading{
           div&
           // This results in div.collection .headingRow .heading { }
         }
     }
 }

有没有办法可以将伪类添加到父祖先？

Answer 1

像这样:

.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}
}

虽然我不认为它比没有任何嵌套的普通旧 CSS 定义更好。