CSS：没有选择器上的部分标签

我试着去了解如何:not选择作品奇怪的行为。首先我猜想，在css中，所有在querySelectorAll函数中起作用的东西都是以相同的方式工作的。CSS：没有选择器上的部分标签

我想要做到的是让从页面不包括一个我不需要元素的列表。那就是为什么我使用的这个小功能：

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

重要的是，每个部分包含一个<li>具有item-story类，但我想排除是<div>内与类sponsored的那些和具有编号hot_news的<section>。

在这个小提琴，你可以找到我的尝试已经是一个例子，它似乎是在CSS做工精细，但不是在JS，即使它似乎工作，我不知道为什么它应该。

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

来源

2016-05-10 Stefano Saitta

'DIV：否（部分）'是无用的。一个'div'元素永远是'section'元素 – Oriol

@Oriol是的，你是对的，我复制粘贴一个古老的例子 –

您的代码在我结束工作的罚款。你确定你的代码不工作吗？也许你需要在getItems定义之前添加function关键字。请看小提琴代码http://jsfiddle.net/RM8nZ/80/ –

:not(foo) bar比赛其中有一些祖先是不是foo所有bar元素。这并不意味着没有祖先是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。

来源

2016-05-10 09:28:49 Oriol

我一直在寻找的其实是同一个解决方案，但使用___filter___。 http://jsfiddle.net/RM8nZ/81/ 编辑：querySelectorAll的返回值不是数组 –

你不能保证排除的元素将是第一个匹配，所以你不能在回调中使用'querySelector' 。如果你使用'querySelectorAll'并且迭代它，它会正常工作。但那将是一个二次成本。 ES6套具有更好的性能。 – Oriol

CSS：没有选择器上的部分标签

回答

相关问题