CSS选择器排除任何级别的任何父级具有类的所有子级

Question

什么

我正在尝试创建一个 CSS 选择器，它可以选择给定父级中的所有子级；但只要路径上的任何元素都有特定的类，就会排除它们。

上下文

我正在用 Javascript 创建一些物化类，它将一些元素替换为它们的材料版本。这在顶级应用程序上运行。每个用户都可以创建自己的应用程序，我想说的是，某组元素不应该经历这个过程。

示例

应该选择这个：

<div>
  <input />
</div>

这不应该被选中：

<div class="no-material">
  <input />
</div>

主要的挑战是这个标签可以在任何地方。示例：

  <main>
    <section class="no-material">
      <form>
        <fieldset>
          <input />
        </fieldset>
      </form>
    </section>
  </main>

也可能是：

  <main>
    <section>
      <form class="no-material">
        <fieldset>
          <input />
        </fieldset>
      </form>
    </section>
  </main>

已经测试过

我尝试了几次。最好的情况是：

div:not(.no-material) > input:not(.no-material), div:not(.no-material) *:not(.no-material) input:not(.no-material)

但是，它仍然会给出一些误报。我可以通过添加很多级别来获得更准确的信息，例如：

div:not(.no-material) > input:not(.no-material),
div:not(.no-material) > *:not(.no-material) > input:not(.no-material),
div:not(.no-material) > *:not(.no-material) > *:not(.no-material) > input:not(.no-material)

像这样 20-50 级（或更多？），但这不是很聪明。

现场版

您可以通过在 Javascript 中编辑 cssSelector 来测试您的选择器。

let cssSelector = [
  // Independent selectors
  'div:not(.no-material) > input:not(.no-material)',
  'div:not(.no-material) *:not(.no-material) input:not(.no-material)'
].join(',');

// This will get elements and run their names. We should get yes1-5, but not no1-5.
let inputs = document.querySelectorAll(cssSelector);
for (let input of inputs) console.log(input.getAttribute('name'));

<!-- Do not edit HTML, just the CSS selector -->

<main style="display: none;">

  <!-- Not selectable -->
  <div class="no-material">
    <input name="no-1">
  </div>

  <div>
    <input name="no-2" class="no-material">
  </div>

  <div>
    <label class="no-material">
      <input name="no-3">
    </label>
  </div>

  <div>
    <label class="no-material">
      <span>
        <input name="no-4">
      </span>
    </label>
  </div>

  <div>
    <label>
      <span class="no-material">
        <input name="no-5">
      </span>
    </label>
  </div>

  <!-- Selectable -->
  <div>
    <input name="yes-1">
  </div>

  <div>
    <input name="yes-2">
  </div>

  <div>
    <label>
      <input name="yes-3">
    </label>
  </div>

  <div>
    <label>
      <span>
        <input name="yes-4">
      </span>
    </label>
  </div>

  <div>
    <label>
      <span>
        <input name="yes-5">
      </span>
    </label>
  </div>

</main>
<!-- Do not edit HTML, just the CSS selector -->

注意：我已经想到了解决这个问题的其他方法，比如迭代一个名为“.no-material”的元素的所有子元素并将类“no-material”添加到所有元素中，但是这是资源消耗，如果可能的话，我想从 CSS 选择器的角度来解决这个问题。

谢谢

Answer 1

找到所有元素（all），然后是元素或其父元素上带有no-material的元素（no），然后从第一个元素中删除第二个元素以找到剩余的元素（@ 987654324@).

const difference = (a, b) => a.filter(elt => b.indexOf(elt) === -1);
  
const all = document.querySelectorAll("input");
const no = document.querySelectorAll(".no-material input, input.no-material");

const yes = difference([...all], [...no]);

console.log(yes.map(elt => elt.name));

<main style="display: none;">

  <!-- Not selectable -->
  <div class="no-material">
    <input name="no-1">
  </div>

  <div>
    <input name="no-2" class="no-material">
  </div>

  <div>
    <label class="no-material">
      <input name="no-3">
    </label>
  </div>

  <div>
    <label class="no-material">
      <span>
        <input name="no-4">
      </span>
    </label>
  </div>

  <div>
    <label>
      <span class="no-material">
        <input name="no-5">
      </span>
    </label>
  </div>

  <!-- Selectable -->
  <div>
    <input name="yes-1">
  </div>

  <div>
    <input name="yes-2">
  </div>

  <div>
    <label>
      <input name="yes-3">
    </label>
  </div>

  <div>
    <label>
      <span>
        <input name="yes-4">
      </span>
    </label>
  </div>

  <div>
    <label>
      <span>
        <input name="yes-5">
      </span>
    </label>
  </div>

</main>

Answer 2

在现代浏览器中，您可以使用 css 变量。

在根级别定义它，在你的类中重新定义它：

:root {
    --mycolor: lightblue;
}

.container {
    --mycolor: lightgreen;
}

.test {
    background-color: var(--mycolor);
}

<div class="test">BASE</div>

<div class="container">
    <div class="test">BASE</div>
</div>