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。

在这个小提琴中你可以找到我已经尝试过的一个例子，它似乎在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。

css：不是选择器在节标签上行为奇怪

1 个答案: