如何根据带指定class的input为对应关联label设置CSS样式？

当然有办法啦！我给你两种实用的解决方案，适配不同的场景需求：

现在主流现代浏览器都支持:has()伪类了，它允许我们选择包含特定子元素的父元素，刚好能解决你的问题。根据你的代码结构，我们可以这样写：

/* 当.control-group容器里存在带.cv-upload类的元素时，选中对应的关联label */
.control-group:has(.cv-upload) label[for="edit-cv-upload-upload"] {
  /* 这里替换成你想要的样式，举个例子： */
  color: #2c3e50;
  font-weight: 700;
  border-bottom: 2px solid #3498db;
}

要是你想让代码更通用，不用硬写id值（毕竟label的for属性和关联元素的id是一一对应的），还可以改成这样：

/* 通用版：匹配所有关联元素带.cv-upload类的label */
.control-group:has([id].cv-upload) label[for^="edit-cv-upload"] {
  /* 自定义样式 */
}

小贴士：:has()目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果你的项目需要兼容更老的浏览器，就用下面的JS方法。

针对不支持:has()的旧浏览器，我们可以用JS来手动关联label和目标元素：

// 找到所有带.cv-upload类的元素
const cvUploadBoxes = document.querySelectorAll('.cv-upload');

cvUploadBoxes.forEach(box => {
  // 获取元素的id，对应label的for属性值
  const targetId = box.id;
  // 找到对应的label标签
  const matchedLabel = document.querySelector(`label[for="${targetId}"]`);
  
  if (matchedLabel) {
    // 给label添加自定义样式类
    matchedLabel.classList.add('cv-label-highlight');
  }
});

然后在CSS里定义这个样式类的效果：

.cv-label-highlight {
  color: #2c3e50;
  font-weight: 700;
  border-bottom: 2px solid #3498db;
}

这样不管浏览器版本如何，都能实现你要的效果。

看你的代码结构，带.cv-upload的元素是在.controls容器里，而label和.controls是同级的，所以用:has(.cv-upload)选中父级.control-group完全没问题。要是后续你的HTML结构有调整，只需要修改:has()里的选择器路径就行啦。

内容的提问来源于stack exchange，提问作者Prajila V P