Question

我必须使用的机制，这是不可改变的：

页面呈现时带有一些样式，例如。 xy级。

一些html动态生成并注入：

<div id="InternalContent"> /* injected here */ </div>

通过执行以下操作来应用

：

#InternalContent {
/* .less files here */
}

目标是能够在#InternalContent内部使用原始类呈现一些元素，而不是由#InternalContent覆盖。

我试过了：

#InternalContent:not(.NotInherited) { ... }
#InternalContent:not(*:not(.NotInherited)) { ... }

和其他一些人，但没有成功。

这种方法的唯一方法是，如果这些类本身有：not（.NotInherited）。

#InternalContent .xy:not(.NotInherited) { }

但在我的情况下，有很多类需要手动更改才能成为可接受的解决方案。

最小（非）工作示例：

https://jsfiddle.net/nvhouq1k/

HTML：

<p class="xy">This to be orange</p>

<div id="InternalContent">
  <p class="xy">This to be blue</p>
  <div class="NotInherited">
    <p class="NotInherited xy">This to be orange</p>
  </div>
</div>

CSS：

.xy {
    color: orange;
}

#InternalContent:not(*:not(.NotInherited)) .xy{
  color: blue;
}
/* *:not(.NotInherited) */
/* :not(.NotInherited) */

Answer 1

更改not()选择器的顺序，使其仅定位.xy元素：您可以尝试以下操作：

.xy {
    color: orange;
}

#InternalContent .xy:not(.NotInherited) {
  color: blue;
}

<p class="xy">This to be orange</p>


<div id="InternalContent">
  <p class="xy">This to be blue</p>
  <div class="NotInherited">
    <p class="NotInherited xy">This to be orange</p>
  </div>
</div>

排除LESS中元素的覆盖类

1 个答案: