将标记选择器应用于深层嵌套结构中规则的直接父级

Question

我发现了几个类似的问题（例如How to specify a html tag on a LESS CSS nested class?），但它们似乎都不适用于嵌套多层深度的规则。

这是我的结构：

article {
  .foo {
    ...
  }
}

这里，.foo可以是许多不同类型的元素之一。为了这个问题，我们可以说其中一个元素是a元素。我想扩展上述结构，从.foo规则中选择标记为 a 的.foo元素。

我上面提到的问题的答案以及其他各种类似问题的答案是，以下内容不起作用：

article {
  .foo {
    a& { ... }
  }
}

而不是为.foo添加a标记，如下所示：

article a.foo { ... }

...整个链都有前缀：

aarticle .foo { ... }

（Here's a live example）。

如何定位.foo规则中标记为a的{​​{1}}个元素？

Answer 1

看起来你想要über优化的LESS变得纠结。如果我理解正确，无论你编译的CSS是哪种方式

article .foo {
    general `article .foo` styles
}
article a.foo {
    additional styles specific to `article a.foo`
}

你可以按原样编写，或者你可以写

article {
    .foo {
        general `article .foo` styles
    }
    a.foo {
        additional styles specific to `article a.foo`
    }
}

或根据你的风格你可以做到

article .foo {
    general `article .foo` styles
}
a.foo {
    additional styles specific to `a.foo`
}