javascript - CSS :not selector act strangely on section tag

Question

我试着理解 :not选择器工作。首先，我猜所有在 querySelectorAll 中工作的东西函数在 css 中的工作方式相同。

我想要完成的是从页面中获取除我不需要的元素之外的元素列表。这就是我使用这个小功能的原因:

getItems() {
 return document.querySelectorAll('div:not(.sponsored):not(#hot_news) .item-story');
}

重要的是每个部分都包含一个 <li>有 item-story类，但我想排除 <div> 中的那些同类sponsored和一个 <section>具有 ID hot_news .

在这个 fiddle 中，您可以找到我已经尝试过的示例，它似乎在 CSS 中工作正常，但在 JS 中却不行，即使它看起来有效，我也不明白为什么它应该。

http://jsfiddle.net/RM8nZ/72/

Answer 1

:not(foo) bar匹配所有 bar有一些祖先的元素不是 foo .这并不意味着没有祖先是 foo .

相反，您应该获得所有 .item-story元素并排除匹配 .sponsored .item-story, #hot_news .item-story 的元素.

var set = new Set(document.querySelectorAll('.item-story'));
var excluded = document.querySelectorAll('.sponsored .item-story, #hot_news .item-story');
for(let el of excluded) set.delete(el);

我使用了 ES6 集，因为操作需要平均是次线性的(可能是常数)。但是，如果您想支持旧浏览器，请使用数组并查看 JavaScript array difference .