与CSS级联：不是伪类 [英] Cascading with CSS :not pseudo-class

问题描述

我对此示例无法正常工作感到困惑：

I'm confused as to why this example doesn't work:

CSS：

p {
  color: red;
}

div:not(.exclude) p {
  color: green;
}

HTML： b

<div>
  <div class="exclude">
    <p>I should be red</p>
  </div>
  <div>
    <p>I should be green</p>
  </div>
</div>

最终结果是< p> 是绿色的，但我会预期第一个是红色的。 这是一个JSFiddle。

The end result is that both <p> are green, but I would have expected the first one to be red. Here's a JSFiddle.

有趣的是，我发现了三种不同的方式使其有效：

Interestingly, I found three different ways to make it work:

1. 删除< a> HTML中的顶层< div>


2. 将顶层< div> 更改为其他元素（例如< section& ）


3. 添加一个额外的 div 到第二个CSS选择器的开头（ div div：not（.exclude）p ）

1. Remove the top-level <div> from the HTML
2. Change the top-level <div> to a different element (e.g. <section>)
3. Add an extra div to the beginning of the second CSS selector (div div:not(.exclude) p)

和另一种奇怪的方式来打破它：

And another weird way to break it:

1. 使用解决方案2作为基础，包装另一个< div> < section>的周围

1. Using solution 2 as a basis, wrap another <div> around the <section>

根据MDN ：

此选择器仅适用于一个元素;您不能使用它来排除所有祖先。例如， body：not（table）a 将仍然适用于表中的链接，因为< tr> 将匹配选择器的：not（）部分。

This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, body :not(table) a will still apply to links inside of a table, since <tr> will match with the :not() part of the selector.

这是有道理的，但我不认为这是发生在这里。由于< div class =exclude> 和其直接子< p> 它应该触发规则，而不管它嵌套在什么内部。我缺少什么？

That makes sense, but I don't think that this is happening here. Since there is nothing between <div class="exclude"> and its direct child <p>, it should trigger the rule regardless of what it is nested inside. What am I missing? I'd really appreciate if someone could help me understand this.

推荐答案

< div class =exclude> 及其直接子< p> 不管它是嵌套在里面。

Since there is nothing between <div class="exclude"> and its direct child <p>, it should trigger the rule regardless of what it is nested inside. What am I missing?

< p> 顶层< div> 和< div class =exclude> 。因此，虽然后者不匹配选择器，前者是，因此你有一个匹配。没有匹配选择器的祖先比那个更接近< p> 没有关系。

The <p> is a descendant of both the top-level <div> and <div class="exclude">. So while the latter doesn't match the selector, the former does, and therefore you have a match. It doesn't matter either that the ancestor that fails to match the selector is closer to the <p> than the one that does.

解决方案1和2通过完全消除匹配来工作。

Solutions 1 and 2 work by eliminating that match altogether.

解决方案3在没有其他< div& / code>存在于< p> 的祖先中，因为这样会将您的选择器限制为那些确切的标准， / em>。这意味着如果你将内部< div> 中的类属性交换到外部，它将不再匹配选择器，反之，如果你交换类 selector 从内部 div 到外部，选择器将不匹配原始的HTML结构（再次假设没有其他 ; div> 存在于层次结构中）。

Solution 3 works when no other <div>s exist in the <p>'s ancestry, because then you restrict your selector to those exact criteria, in that exact order. Which means if you swapped the class attribute from the inner <div> to the outer one, it would no longer match the selector, and conversely if you swapped the class selector from the inner div to the outer one, the selector would not match the original HTML structure (again, assuming no other <div>s exist in the hierarchy).

包装另一个< div> < section> 周围只是使选择器再次通过< div> 匹配。与< div class =exclude> 大致相同的方式忽略< section&

Wrapping another <div> around the <section> just causes the selector to be matched again by that <div>. The <section> is ignored, in much the same way as <div class="exclude">.

另请参阅：

• CSS否定伪类：not（）for parent / ancestor elements


• 为什么这个CSS：not（）声明过滤器？


• CSS：not（）选择器应该与遥远的后代工作吗？

• CSS negation pseudo-class :not() for parent/ancestor elements
• Why doesn't this CSS :not() declaration filter down?
• Is the CSS :not() selector supposed to work with distant descendants?

这篇关于与CSS级联：不是伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！