CSS / LESS 选择不包含在给定 ID 中的元素

Question

假设我有以下 HTML 结构：

<div id="outer">
   <div id="target">
   </div>
</div>

外部 div 可能有也可能没有 ID "outer"。

我只想将样式应用到 #target 时，它 not 包含在具有 ID "outer":

的 div 中

<div id="something-else">
   <div id="target">
   </div>
</div>

使用 LESS，我尝试了以下方法：

:not(#outer) {
   #target {
     // styles
   }
}

这显然不起作用（我猜是因为 :not 运算符不排除其嵌套元素）。

有什么方法可以用 CSS / LESS 来实现吗？当然，我知道我可以重构 html / 逻辑，这样我就可以在不使用 :not 的情况下应用样式，但我想知道是否有办法按原样实现我的要求。

Answer 1

试试这个

:not(#outer) > #target {
     // Styles
     background-color: red;
   }
}

这里有一些fiddle你可以试试。

CSS / LESS selecting elements NOT contained within a given ID