如何为每个imgClass容器选择首个嵌套的vidplayicon元素？

嗨，我来帮你分析问题并给出解决方案～

你的CSS选择器没达到预期效果，核心原因是**:first-of-type的作用范围和你想的不一样**：它是相对于元素的直接父元素来判断的。在你的HTML结构里，每个.vidplayicon都是它所在<div>的第一个<p>标签，所以你的选择器会选中所有的.vidplayicon，而不是每个.imgClass容器里的第一个目标元素。

方案1：CSS + :has()选择器（现代浏览器适用） #

这个写法更直观，利用:has()判断父容器是否包含目标元素，再通过兄弟选择器排除后续元素：

/* 先给所有.imgClass下的.vidplayicon设置红色 */
.imgClass .vidplayicon {
  color: red;
}

/* 将第一个含.vidplayicon的div之后的所有div里的.vidplayicon恢复默认颜色 */
.imgClass div:has(.vidplayicon) ~ div .vidplayicon {
  color: initial;
}

原理：div:has(.vidplayicon)会选中所有包含.vidplayicon的div，~ div会选中这些div之后的所有同级div，最后把里面的.vidplayicon颜色重置，这样就只剩第一个出现的.vidplayicon是红色了。

方案2：JavaScript兼容方案（支持所有浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以用JS精准选中目标元素：

// 遍历每个.imgClass容器
document.querySelectorAll('.imgClass').forEach(container => {
  // 找到当前容器里第一个.vidplayicon
  const firstVidIcon = container.querySelector('.vidplayicon');
  if (firstVidIcon) {
    // 直接设置样式，或添加类名方便后续维护
    firstVidIcon.style.color = 'red';
    // firstVidIcon.classList.add('highlighted');
  }
});

这种方法兼容性拉满，逻辑清晰，后续调整样式时，给类名写CSS会比内联样式更灵活。

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