可选的子选择器，带CSS / Stylus / LESS：.aa＆gt;的.bb？ ＆GT; .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>

因此，要选择靠近.cc的所有.aa，我需要指定两个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之下或{{1}}之下。

Answer 1

对于Stylus和Sass，你可以这样做（live example for Sass）：

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

我无法在Sass的单​​行中找到这样的方法，但对于Less / Stylus / Scss，您也可以这样做（实例for Scss，for Less）：< / p>

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

这也不是那么漂亮，但总比没有好。）

Answer 2

.aa > .cc, .aa > .bb > .cc {}不会有效吗？或者我误解了你的问题？
这样，系统只会选择直接.cc个孩子的.aa和.cc个孩子（.bb的孩子）{/ 1}}。

Answer 3

如果你想使用你的选项，顺便说一下非常有趣，你可以使用最正确的表格：

>.aa (>.bb)? >.cc { ... }

但形式正确：

.aa .cc { ... }

进入手写笔：

.aa   
  .cc

这就是全部。

Answer 4

我使用：has（）解决方案，用于在可用时增强选择器

//adds .specific-ancestor-class as more specific selector, when available as ancestor, otherwise select inner with less specificity
*:has(.specific-ancestor-class, *){
    .inner {
        //style...
    }
}