css - 可选的子选择器，带 CSS/Stylus/LESS : . aa > .bb? > .cc

Question

考虑这个带有 CSS 类 aa、bb 和 cc 的 HTML:

<div class='aa'>
<div class='bb'>
<div class='cc'>
</div>
</div>
</div>

我可以像这样选择 class=cc 标签:.aa > .bb > .cc。但是，在我的例子中，有时 .bb 标签不存在，也就是说，HTML 看起来像这样:

<div class='aa'>
<div class='cc'>
</div>
</div>

因此，要选择 .aa 附近的所有 .cc，我需要指定两个 CSS 路径:

.aa > .bb > .cc,
.aa > .cc { .... }

这可行，但是，没有更短的方法吗？类似这样的东西:

.aa > (.bb >)? .cc { ... }   /* ? means "optional" */

使用 CSS 或 Stylus 或 LESS 之类的东西？

动机:在现实世界中，“aa”和“bb”和“cc”是比较长的名字，而且“aa”和“cc”前后的东西更多，最好不要需要复制那些东西。

请注意:在我的例子中，这将不起作用:.aa .cc 因为它会与页面其他地方的太多 .cc 匹配。 .cc 需要紧接在 .aa 下方，或位于 .aa > .bb 下方。

Answer 1

对于 Stylus 和 Sass，您可以这样做 (live example for Sass):

.aa
  > .bb, &
    > .cc
      width: 10px

我无法在 Sass 的单行代码中找到这样做的方法，但对于 Less/Stylus/Scss，您也可以这样做(实例 for Scss、for Less):

.aa { > .bb, & { > .cc {
  width: 10px
}}}

这也不是那么漂亮，但总比没有好:)