如何为包含canvas子元素的col-sm-12容器内label设置专属CSS样式

实现方案 #

方案1：CSS :has() 伪类实现（推荐，现代浏览器兼容） #

目前主流浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）均已支持:has()伪类，可直接通过该选择器实现需求，不需要修改现有HTML结构：

/* 选中直接子元素包含canvas的.col-sm-12容器下的.control-label标签 */
.col-sm-12:has(> canvas) > .control-label {
  float: left;
  position: absolute;
}

该选择器逻辑：

• 先匹配所有类名为col-sm-12、且直接子元素存在canvas节点的容器
• 再选中该容器下直接子元素中类名为control-label的标签
• 不会匹配到包含input的第二个col-sm-12容器的label，完全符合需求

方案2：JS辅助兼容方案（适配不支持:has()的旧浏览器） #

如果需要兼容低版本浏览器，可以通过JS给包含canvas的col-sm-12容器额外加一个自定义类，再写对应CSS即可：

第一步：添加自定义CSS

.col-sm-12.has-canvas > .control-label {
  float: left;
  position: absolute;
}

第二步：添加JS逻辑

// 页面加载完成后遍历所有.col-sm-12容器
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.col-sm-12').forEach(container => {
    // 判断容器是否有直接子元素canvas
    if (container.querySelector(':scope > canvas')) {
      container.classList.add('has-canvas')
    }
  })
})

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