如何用querySelectorAll排除嵌套轮播容器内的按钮？

首先，你的:not(.carrousel-container) .carousel_container__button选择器逻辑完全不符合需求，这也是它选中所有3个按钮的核心原因：

这个选择器的含义是在目标容器#selector的后代中，找到所有不属于.carrousel-container的元素，再在这些元素内部查找按钮。但你的场景里，最外层按钮的父元素就是#selector（它本身就是.carrousel-container），嵌套按钮的父元素也是.carrousel-container——按这个逻辑理论上应该选不到任何按钮，但实际选中了3个，大概率是你代码里的类名拼写不一致（比如carrousel和carousel的字母r数量不同），导致:not(.carrousel-container)匹配了所有元素，最终选中了全部按钮。

抛开类名问题，回到你的核心需求：只选中目标轮播容器关联的按钮，排除嵌套子轮播里的按钮，且不能用直接子选择器>（因为结构差异大）。这里提供两种可靠的解决方案：

方案1：JavaScript过滤（兼容性最好，推荐） #

利用.closest()方法反向判断：检查每个按钮的最近.carrousel-container祖先是否就是目标容器本身。如果是，说明这个按钮属于目标轮播，而非嵌套子轮播。

const container = document.querySelector('#selector');
// 先选中容器内所有按钮
const allButtons = container.querySelectorAll('.carousel_container__button');
// 过滤出最近轮播容器是目标容器的按钮
const targetButtons = Array.from(allButtons).filter(button => {
  return button.closest('.carrousel-container') === container;
});
// 输出结果
document.querySelector('span').innerHTML = targetButtons.length; // 结果为1

这个方法完全不依赖复杂的CSS选择器，不管内部结构怎么变化，只要按钮的归属轮播是目标容器，就会被选中，灵活度拉满。

方案2：CSS :scope伪类（现代浏览器支持） #

:scope伪类代表当前选中的容器元素，结合:not()排除嵌套子轮播内的按钮：

const container = document.querySelector('#selector');
// 选中目标容器内的所有按钮，但排除那些在其他.carrousel-container里的按钮
const targetButtons = container.querySelectorAll(':scope .carousel_container__button:not(.carrousel-container .carousel_container__button)');
document.querySelector('span').innerHTML = targetButtons.length; // 结果为1

这个选择器的逻辑是：先选中目标容器下的所有按钮，再去掉那些被其他.carrousel-container包裹的按钮，剩下的就是你需要的最外层按钮。注意:scope不支持IE浏览器，如果你需要兼容旧环境，优先选方案1。

内容的提问来源于stack exchange，提问作者Toni Michel Caubet