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

Question

假设我有以下 HTML 结构:

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

外部 div 可能有也可能没有 id“outer”。

只有当#target 不包含在 ID 为“outer”的 div 中时，我才想将样式应用于 #target:

<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你可以试试。