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

Question

我试图用SASS为一个WordPress网站创建CSS代码，在这个网站上，我为显示在名为".entry-content "的容器中的内容编写了我的样式，我创建了一些自定义块，并给它们一个名为".mnk-block "的标准类。

我创建了一些自定义块，并给它们一个标准类，叫做".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 "显示正确，因为它使用了在其他地方声明的样式，但我的".entry-content "的样式却没有被应用到任何地方。

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

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

但是这个选择了任何符合 .entry-content覆盖或与我的风格冲突，我的。.mnk-block CSS。

我如何声明那些不应用于我的特定类的样式？这真的让我很困惑--在这里很难解释。感谢任何帮助。

Answer 1

在 秩序 的CSS也很重要。

由于这里的snippets不接受SASS，我使用的是常规CSS。你可以省略 :not 如果你先为 h2 中（或任何其他元素）的 .entry-content 然后添加一条规则，用于 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中的入口内容h2。所以，如果你把".mnk-block "移到底部，它将覆盖.mnk-block中的entry-content h2。如果你尝试下面的代码，entry-content h2将是蓝色的，而mnk-block h2将是红色的。

.entry-content h2{
    color: blue;
}

.mnk-block h2{
    color: red;  
}

但是，你用下面这段代码，一切都将是蓝色的，因为最后一条指令是入口内容h2

.mnk-block h2{
    color: red;  
}

.entry-content h2{
    color: blue;
}

另外，如果你想只应用于 entry-content 的第一个子代 h2，并显示所有嵌套子代，你可以使用 >。

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

两者都是一样的