CSS中生效的:not选择器在jQuery中使用异常问题求助

问题根因 #

你遇到的问题核心是jQuery内置选择器和原生CSS选择器的规则不一致：

• 原生CSS的:not()支持传入复合选择器、后代选择器等复杂规则，所以你写的CSS测试样式可以正常生效，准确匹配到排除.myclass元素及其后代的所有元素。
• jQuery依赖的Sizzle选择器引擎中，:not()仅支持传入简单选择器，不支持.myclass *这类后代选择器写法，你写的复杂过滤规则实际没有生效，导致最终选中了页面全部元素。

可行解决方案 #

方案1：直接调用原生选择器 #

现代浏览器都支持原生复杂选择器，你可以用querySelectorAll获取目标元素再转成jQuery对象即可：

// 原生选择器完全兼容你写的规则
const $target = $(document.querySelectorAll('*:not(.myclass):not(.myclass *)'));

方案2：用filter方法手动过滤（兼容性更好） #

如果需要兼容IE等旧浏览器，推荐用jQuery的filter方法做二次过滤，逻辑更直观也不会有选择器兼容问题：

const $target = $('*').filter(function() {
  // 同时排除自身带.myclass、或者父级存在.myclass的元素
  return !$(this).hasClass('myclass') && $(this).closest('.myclass').length === 0;
});

优化建议 #

上面两种写法默认会遍历页面所有元素，页面节点较多时会有性能损耗，如果你的目标元素都属于某个上层容器，可以缩小选择范围：

// 示例：只筛选id为content的容器下的元素
const $target = $('#content').find('*').filter(function() {
  return !$(this).hasClass('myclass') && $(this).closest('.myclass').length === 0;
});

内容的提问来源于stack exchange，提问作者Shmack