如何根据共同祖先下后代元素的条件选择指定delete按钮？

要实现这个需求，我们可以借助CSS的:has()选择器（现代浏览器支持），或者用JavaScript做兼容处理，下面分别说明：

一、CSS方式（推荐，现代浏览器可用） #

直接用以下选择器就能精准匹配到你需要的按钮：

.container:has(.data a[origin="internal"]) .actions .delete

选择器拆解： #

• .container:has(...)：:has()是CSS的相对选择器，它会选中所有包含括号内指定元素的.container容器——简单说就是先筛选出符合条件的父容器。
• .data a[origin="internal"]：这是筛选父容器的条件：要求该.container的后代里，存在.data下的<a>标签，且这个<a>的origin属性值严格等于internal。
• .actions .delete：在筛选后的.container内部，定位到.actions容器下的.delete按钮。

⚠️ 注意：:has()选择器从Chrome 105、Firefox 121、Safari 15.4开始支持，如果你的项目需要兼容更老的浏览器，建议用下面的JavaScript方案。

二、JavaScript兼容方案 #

如果要覆盖旧浏览器，可以通过遍历判断的方式获取目标按钮：

// 方法1：分步实现
// 1. 先找到所有包含符合条件<a>标签的.container
const validContainers = document.querySelectorAll('.container');
const targetButtons = [];

validContainers.forEach(container => {
  // 检查当前container里是否有origin="internal"的<a>
  const hasValidLink = container.querySelector('.data a[origin="internal"]') !== null;
  if (hasValidLink) {
    // 收集该container下的.delete按钮
    const buttons = container.querySelectorAll('.actions .delete');
    targetButtons.push(...buttons);
  }
});

// 方法2：简洁的链式写法
const targetButtons = [...document.querySelectorAll('.container')]
  .filter(container => container.querySelector('.data a[origin="internal"]'))
  .flatMap(container => [...container.querySelectorAll('.actions .delete')]);

这样targetButtons数组里就包含了所有符合要求的.delete按钮，你可以对它们进行后续操作（比如绑定事件、修改样式等）。

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