如何仅选择包含<iframe>标签的<figure>元素？

CSS 实现方式 #

使用CSS的:has()伪类可以直接匹配包含指定子元素的父元素，写法如下：

figure:has(iframe) {
  /* 在这里编写你的样式规则 */
}

这个选择器会选中所有后代中存在<iframe>的<figure>元素，无论<iframe>是直接子元素还是嵌套在更深层级里。需要注意的是，:has()伪类仅支持Chrome 105+、Firefox 121+等现代浏览器。

JavaScript 实现方式 #

如果需要兼容不支持:has()的旧环境，可通过JS筛选目标元素：

方法1：结合querySelectorAll与:has() #

const targetFigures = document.querySelectorAll('figure:has(iframe)');

执行后会返回页面中所有符合条件的<figure>元素集合。

方法2：遍历检查子元素 #

const allFigures = document.querySelectorAll('figure');
const targetFigures = Array.from(allFigures).filter(figure => {
  return figure.querySelector('iframe') !== null;
});

先获取页面中所有<figure>元素，再逐个检查内部是否存在<iframe>，最终筛选出符合要求的元素。

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