如何告诉CSS:not()选择器影响所有子节点? [英] How can I tell CSS :not() selector to affect all child nodes?

问题描述

请参阅此最小示例

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

I have a style(SCSS) like this

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

我希望具有 .guard 类名颜色的节点内的任何内容都不受 color:red;

I want anything inside the node with .guard class name's color not to be affected by color: red;

我怎么能达到这种效果?

How can I achieve this effect?

推荐答案

如果我正确理解了您要达到的效果，则可以使用以下两个选择器来实现它:

If I've correctly understood the effect you are trying to achieve, you can implement it with the following two selectors:

.global {
  color: red;
}

.global .guard {
  color: black;
}

在这种情况下，您实际上根本不需要:not()伪选择器.

In this case, you really don't need the :not() pseudo-selector at all.

工作示例:

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

这篇关于如何告诉CSS:not()选择器影响所有子节点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！