正确使用 CSS :not 选择器在特定容器中排除元素答案

【问题标题】：Correct use of CSS :not selector for excluding element when in particular container正确使用 CSS :not 选择器在特定容器中排除元素
【发布时间】：2016-09-22 22:51:02
【问题描述】：

我正在设计一系列我无法控制其标记的页面，并且它提出了一些独特的挑战。这些样式基于我获得的设计模型，因此有一些实例 - 例如 - h2 元素必须看起来与其他特定的 h2 元素不同，以便遵循设计。

目前，我正在尝试应用一些应该影响 大多数 h2 元素的样式，但不影响出现在具有“块”类的 div 中的 h2 元素。在这种情况下，CSS 选择器会是什么样子？我不顾一切地尝试了这个，但假设它不太正确是正确的。

h2:not(.block h2) {
   ~styling for main h2 elements~
}
.block h2 {
  ~separate styling for h2 elements within .block div~
}

有人能解释一下吗？谢谢！

【问题讨论】：

您是否尝试过更改顺序并将 .block h2 放在上面，因为第一个不知道 .block h2 第一次加载时是什么。
你能给我们一个 HTML 样本和需要应用的实际样式吗？
很遗憾这样不行，:not()里面的选择器必须是一个简单的选择器。这意味着像.block h2 这样的后代选择器将不起作用。
如果你不跳过箍来试图避免影响 div.block 中那些 h2 的“一般”h2 样式，而只是简单地覆盖，那么你真的会更好您不喜欢 div.block h2 的一般样式以及您希望它们具有的特定属性值。
在某处有一个规范...

标签： html css css-selectors

【解决方案1】：

你可以试试这个：

h2 {...}

.block h2 {...}

【讨论】：

是的，很简单，但这似乎工作正常。非常感谢！

【解决方案2】：

我正在尝试应用一些应该影响大多数 h2 元素的样式，但不会影响出现在类 block 的 div 中的 h2 元素。

您还没有指出h2 在 div 中存在的级别。所以这里有几个选项，如果你想使用:not() 伪类。

如果h2 是一级：

div:not(.block) h2 {
    color: red;
}

<div class="block">
    <h2>with block class</h2>
</div>

<div>
    <h2>without block class</h2>
</div>

如果h2 是两个级别：

div:not(.block) div h2 {
  color: red;
}

<div class="block">
  <div>
    <h2>with block class</h2>
  </div>
</div>

<div>
  <div>
    <h2>without block class</h2>
  </div>
</div>

如果h2 是三个级别：

div:not(.block) div div h2 {
  color: red;
}

<div class="block">
  <div>
    <div>
      <h2>with block class</h2>
    </div>
  </div>
</div>

<div>
  <div>
    <div>
      <h2>without block class</h2>
    </div>
  </div>
</div>

等等……

另外请记住，:not()，因为它目前存在于大多数浏览器中，只接受 simple selectors 作为参数。

你的例子...

h2:not(.block h2) {
   ~styling for main h2 elements~
}

... 在大多数浏览器中都会失败，因为参数包含一个复杂选择器（在这种情况下由后代组合器创建）。

【讨论】：

这个答案可能是一个很好的解决方案，具体取决于 OP 的 html（他没有提供）。