CSS : not () 선택자가 모든 자식 노드에 영향을 미치도록 어떻게 알릴 수 있습니까?

Question

이 최소 예를 참조하십시오

.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>

이런 스타일 (SCSS)이 있어요

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

.guard클래스 이름의 색상이 있는 노드 내부의 모든 것이 영향을받지 않기를 바랍니다.color: red;

이 효과를 어떻게 얻을 수 있습니까?

Answer 1

달성하려는 효과를 올바르게 이해했다면 다음 두 가지 선택기로 구현할 수 있습니다.

.global {
  color: red;
}

.global .guard {
  color: black;
}

이 경우에는 :not()의사 선택기 가 전혀 필요하지 않습니다 .

---

작업 예 :

.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>