父子元素类名相同时如何用CSS或jQuery排除父元素选中目标子元素

现代浏览器原生CSS选择器实现 #

主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已支持:has()伪类，可以直接通过该伪类筛选掉内部包含同类名子元素的父节点：

$$(".mnr-c.xpd.O9g5cc.uUPGi:not(:has(.mnr-c.xpd.O9g5cc.uUPGi))").forEach(el => console.log(el))

逻辑说明：:has()会匹配所有包含指定后代元素的节点，搭配:not()即可排除掉第1行的父元素，直接得到你需要的3个目标元素。

兼容旧环境/jQuery实现 #

如果需要兼容不支持:has()的运行环境，可以通过过滤逻辑实现需求：

原生JS兼容写法 #

// 先查询所有匹配类名的元素，再过滤掉内部存在同类名子元素的节点
const targetList = [...document.querySelectorAll('.mnr-c.xpd.O9g5cc.uUPGi')].filter(el => {
  return !el.querySelector('.mnr-c.xpd.O9g5cc.uUPGi')
})
targetList.forEach(el => console.log(el))

jQuery写法 #

$('.mnr-c.xpd.O9g5cc.uUPGi').filter(function() {
  return $(this).find('.mnr-c.xpd.O9g5cc.uUPGi').length === 0
}).each(function() {
  console.log(this)
})

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