Wie kann ich CSS: not () selector anweisen, alle untergeordneten Knoten zu beeinflussen?

Question

Bitte beachten Sie dieses Mindestbeispiel

.global :not(.guard) {
  color: red;
}

<div class="global">
  <p>I'm outside guard</p>

  <div class="guard">
    I'm inside guard.

    <div>
      <hr>

      <p>
        I'm a block inside guard.

      </p>

      <p>
        I want to black color too.
      </p>

      <p>
        How can I achieve it?
      </p>
    </div>
  </div>
</div>

Ich habe einen Stil (SCSS) wie diesen

.global {
  :not(.guard) {
    color: red;
  }
}

Ich möchte, dass alles innerhalb des Knotens mit .guardder Farbe des Klassennamens nicht beeinflusst wirdcolor: red;

Wie kann ich diesen Effekt erzielen?

Answer 1

Wenn ich den Effekt, den Sie erzielen möchten, richtig verstanden habe, können Sie ihn mit den folgenden zwei Selektoren implementieren:

.global {
  color: red;
}

.global .guard {
  color: black;
}

In diesem Fall brauchen Sie den :not()Pseudo-Selektor überhaupt nicht.

---

Arbeitsbeispiel:

.global {
  color: red;
}

.global .guard {
  color: black;
}

<div class="global">
  <p>I'm outside guard</p>

  <div class="guard">
    I'm inside guard.

    <div>
      <hr>

      <p>
        I'm a block inside guard.

      </p>

      <p>
        I want to black color too.
      </p>

      <p>
        How can I achieve it?
      </p>
    </div>
  </div>
</div>