14

考虑这个带有 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因为那会匹配页面上其他地方的太多.ccs 。.ccs 需要紧接在或.aa之下.aa > .bb。

4

4 回答 4

14

对于 Stylus 和 Sass，您可以这样做（Sass 的实时示例）：

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

我在 Sass 的单行中找不到这样做的方法，但对于 Less/Stylus/Scss 你也可以这样做（Scss的实时示例，对于 Less）：

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

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

于 2012-11-27T15:03:06.327 回答
1

行不通.aa > .cc, .aa > .bb > .cc {}？还是我误解了你的问题？
这仅选择.cc那些是直接.aa子代和.cc那些是.bb子代（的子代.aa）。

于 2012-11-23T06:11:01.893 回答
1

如果你想使用你的选项，顺便说一句很有趣，你可以使用最正确的形式：

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

但正确的形式是：

.aa .cc { ... }

进入手写笔：

.aa   
  .cc

就这样。

于 2013-06-27T15:55:39.580 回答
0

我使用 :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...
    }
}
于 2020-12-02T10:49:42.197 回答