层叠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：

<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


2. < div> dahdah / 803xkdfg / 1 />将顶级< 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> 存在于< p> 的祖先中，因为您将选择器限制为确切的准则， / em>的。这意味着如果将内部< div> 中的类属性交换为外部类属性，则它将不再与选择器匹配，反之如果您交换了类选择器从内部的 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> 匹配。 < section> 被忽略，与< div class =exclude> 。

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（）为父/祖先元素


• 为什么不这样的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屋！