css 不是选择器缺少主要元素之外的项目

Question

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

使用 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>

如果上下文是 body
，则只会找到 'palle' 如果上下文是 html

，将同时找到 'palle' 和 'olle'

有人可以解释为什么吗？

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

Answer 1

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

<!-- 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>

Answer 2

当您使用 $("body").find() 时，您是在正文中搜索内容。这意味着正文被排除在搜索之外并且不会匹配 :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 选择器，因为它在正文中。

css 不是选择器缺少主要元素之外的项目

css not selector missing items outside main element

html

css

jquery

jquery-selectors