为什么 CSS 的代码在没有 > 的情况下不起作用

Question

在下面的 JSFiddle 中，我有一个示例，试图不对 div 内的对象应用样式 class .k-grid。

在给定的示例中，以下代码行无法按我的预期运行。据我了解 CSS 我是说：每个 P 对象，没有 "fancy" class，并且不在 div 对象内部的某个地方.k-网格。

因为我给定的 p 对象在带有 .k-grid 的 div 中，我不希望它变绿..但它确实变绿了。

<style>
form.editform div:not(.k-grid) p:not(.fancy) {
  color: green;
}
</style>
<form class="editform">
  <div>
    <div class="k-grid">
      <p>I am a paragraph.</p>
      <p class="fancy">
      <span class="notfancy">I am so very fancy!</span></p>
      <div class="fancy">I am NOT a paragraph.</div>
    </div>
  </div>
</form>

当我将 form.editform div:not(.k-grid) p:not(.fancy) 更改为 form.editform div:not(.k-grid)>p:not(.fancy) 时，它确实正确地排除了 p fancy 变为绿色。

有人可以向我解释为什么 space 无法从对象中删除 class，而 > 可以吗？以及解释 "descendents" 和 "children".

之间的区别

Answer 1

后代是 children，以及 children 的后代（例如 grandchildren、grand-grandchildren 等）。您的 <span> 是 <form> 的后代，但不是 child 的后代。

在任何情况下 <div class="k-grid"> 都不会匹配到 div:not(.k-grid)。

您的选择器选择 <form class="editform"> 作为其 form.editform、其后代（顺便说一句 child）<div> 作为 div:not(.k-grid)，以及它的后裔（更准确地说，是祖父child）<p> for p:not(.fancy)。您可以通过将 <div> 更改为例如<article>，然后看到 CSS 规则不再起作用。

当您将选择器的最后一部分更改为 child 选择器时，<p> 无法匹配，因为它是 <div> 的一个 grandchild。

为什么 CSS 的代码在没有 > 的情况下不起作用

Why does this code of CSS not work without the >

css

kendo-asp.net-mvc