css 不是选择器在主元素之外缺少项目答案

【问题标题】：css not selector missing items outside main elementcss 不是选择器在主元素之外缺少项目
【发布时间】：2015-10-28 20:42:16
【问题描述】：

我的站点中有一些组件，这些组件对它们有操作，但前提是它们不包含在另一个元素中。

使用不喜欢的css选择器

:not(.container) > .box

<body>
  <main>
    <div class="container">
        <div class="box">kalle</div>
    </div>
    <div class="box">palle</div>
  </main>
  <div class="box">olle</div>
</body>

只有在上下文为正文时才会找到“palle”
如果上下文是 html，将同时找到 'palle' 和 'olle'

谁能解释一下原因？

http://jsfiddle.net/4guher4u/2/

【问题讨论】：

> 表示只选择直接后代。 palle 不是 body 的直接后代，olle 根本不是 main 的后代

标签： jquery html css jquery-selectors

【解决方案1】：

这是因为您的body 和main 元素与:not(.container) 选择器匹配，因为它们都没有“容器”的class。然后有一个直接的.box 孩子被选中。

<!-- Not .container -->
<body> 
  <!-- Not .container -->
  <main>
    <!-- .container, ignored
    <div class="container">
        <div class="box">kalle</div>
    </div>
    -->
    <!-- Not .container, is main > .box -->
    <div class="box">palle</div>
  </main>
  <!-- Not .container, is body > .box -->
  <div class="box">olle</div>
</body>

【讨论】：

我没有太多使用“高级”css 选择器的经验，但我认为当上下文为正文时“olle”不匹配很奇怪。 .box 存在并且没有带有 .container 的父级。这就是我所要求的逻辑，但似乎我也在含蓄地要求 .box 与父母一起。我使用在我的用例中有意义的更广泛的上下文来修复它，但为了理解。 '>' 是否告诉 .box 应该有一个父级？我可以用另一种方式表达它来完成我的逻辑搜索吗？

【解决方案2】：

当您使用 $("body").find() 时，您正在搜索 inside 正文的内容。这意味着正文被排除在搜索之外并且不会匹配:not(.container) 选择器，然后<div class="box">olle</div> 不会匹配not(.container) > .box 选择器，因为它不在任何元素内。

当您在html 元素内搜索时，使用$("html").find()，:not(.container) 选择器匹配body，因为它是html 的子元素，因此<div class="box">olle</div> 匹配:not(.container) > .box 选择器因为它在体内。

【讨论】：