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>

如果上下文是正文，

将只找到'palle' 如果上下文是html，将会找到'palle'和'olle'

有人可以解释原因吗？

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

Answer 1

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

.box

Answer 2

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

当您使用html在$("html").find()元素内搜索时，:not(.container)选择器与body匹配，因为它是html的子元素，并且所以<div class="box">olle</div>与:not(.container) > .box选择器匹配，因为它位于正文中。

css没有选择器缺少主要元素之外的项目

2 个答案: