时间戳

首页 > 解决方案 > 为什么没有 > 这段 CSS 代码不起作用

css - 为什么没有 > 这段 CSS 代码不起作用

问题描述

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

在给定的示例中，以下代码行没有按我的预期工作。据我了解 CSS 我是说：每个 P 对象，没有“花式”类，并且不在具有 .k-grid 的 div 对象内的某个位置。

由于我给定的 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 幻想变成绿色。

有人可以向我解释为什么空间不能从对象中删除类，而 > 确实有效吗？以及解释“后代”和“孩子”之间的区别。

标签： csskendo-asp.net-mvc

解决方案

后代是孩子和孩子的后代（例如孙子、孙孙等）。你<span>是 的后代<form>，但不是它的孩子。

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

您的选择器正在选择<form class="editform">它的form.editform，它的后代（顺便说一下，一个孩子）<div>，div:not(.k-grid)以及它的后代（更准确地说，孙子）<p>。您可以通过更改为 egp:not(.fancy)来检查这是否正在发生，并看到 CSS 规则停止生效。<div><article>

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

推荐阅读