CSS :not() 如果它是具有 class="foo" 的容器的子元素，我如何不选择任何元素？

Question

我正在尝试在 SASS 中为一个 WordPress 网站创建 CSS 代码，我在该网站上为名为“.entry-content”的容器中显示的内容编写了我的样式。

我创建了一些自定义块，并为它们提供了一个名为“.mnk-block”的标准类。

我想要的是，我的块中的元素（例如 <h2> 或 <p>），如果放置在该容器内，则不要使用父“.entry-content”样式。我认为使用 :not() 伪类是合适的方法，但它不起作用。

<div class="entry-content">
  <h2>My title</h2>
  <div class="mnk-block">
    <h2>My block title</h2>
  </div>
</div>

在 sass 中我写了这样的代码

.mnk-block {
  h2 {
    color: red;
  }
}
.entry-content {
  h2:not(.mnk-block h2) {
    color: blue;
  }
}

但这最终根本没有选择任何东西。我的“.mnk-block”显示正确，因为它使用了在其他地方声明的样式，但我的“.entry-content”样式没有在任何地方应用。

然后我尝试了这个：

.mnk-block {
  h2 {
    color: red;
  }
}

.entry-content {
  :not(.mnk-block) {
    h2 {
      color: blue;
   }
  }

但这会选择在.entry-content 中匹配的任何内容，覆盖或与我的.mnk-block CSS 样式发生冲突。

如何声明不应用于我的特定类的样式？这真的让我很困惑 - 很难在这里解释它。任何帮助表示赞赏。

Answer 1

CSS 的顺序也很重要。

由于这里的 sn-ps 不接受 SASS，我使用的是常规 CSS：如果您首先在 .entry-content 中为 h2（或任何其他元素）定义规则，然后添加h2 作为 .mnk-block 的子级的规则，它将覆盖前一个：

.entry-content h2 {
  color: blue;
}
.mnk-block h2 {
  color: red;
}

<div class="entry-content">
  <h2>My title</h2>
  <div class="mnk-block">
    <h2>My block title</h2>
  </div>
</div>

Answer 2

我将使用纯 css 中的示例来解释它。 Css 优先于声明的最后一条指令。因此，如果您将“.mnk-block”移动到底部，它将覆盖 .mnk-block 中的 entry-content h2。如果您尝试下面的代码 entry-content h2 将是蓝色的，而 mnk-block h2 将是红色的

.entry-content h2{
    color: blue;
}

.mnk-block h2{
    color: red;  
}

但是，你使用下面这段代码，一切都会是蓝色的，因为最后一条指令是 entry-content h2

.mnk-block h2{
    color: red;  
}

.entry-content h2{
    color: blue;
}

另外，如果你只想申请entry-content的第一个child h2并呈现所有嵌套的children，可以使用>。

.entry-content > h2{
    color: blue;
}

Answer 3

请试试这个

CSS

.mnk-block h2{
  color: red;  
}
.entry-content:not(h2){
  color: blue;
}

SCSS

.mnk-block h2{
  color: red;  
}
.entry-content:not(h2){
  color: blue;
}

两者都一样