如何基于子元素选择CSS类的祖先元素？求助解决选择器失效问题

需求：为包含子元素.st-key-image-container（绿色标识）的.st-emotion-cache-1jicfl2类（黄色标识）应用CSS样式，由于该类在页面中重复出现，只能通过唯一子元素进行区分。

尝试的代码：

.st-emotion-cache-1jicfl2:has(.st-key-image-container){
width: 100%;
padding:0px !important; 
min-width: auto;
max-width: initial;
}

以下是解决方法：

• 检查浏览器兼容性：:has()选择器需要Chrome 105+、Firefox 121+等较新版本浏览器支持，旧浏览器不兼容会导致代码失效。
• 确认子元素匹配规则：如果.st-key-image-container是.st-emotion-cache-1jicfl2的直接子元素，可尝试改为直接子元素选择器写法：

  .st-emotion-cache-1jicfl2:has(> .st-key-image-container){
    width: 100% !important;
    padding: 0px !important; 
    min-width: auto !important;
    max-width: initial !important;
  }
  

• 提升选择器优先级：给所有属性添加!important，避免被其他高优先级样式覆盖；或者增加选择器层级，比如结合父元素类名（如果有的话）。
• 验证选择器有效性：在浏览器开发者工具控制台执行document.querySelector('.st-emotion-cache-1jicfl2:has(.st-key-image-container)')，若返回null，说明类名拼写错误或元素层级不符，需核对实际DOM结构。
• JavaScript替代方案：如果:has()无法生效，用JS定位元素并设置样式：

  document.querySelectorAll('.st-emotion-cache-1jicfl2').forEach(el => {
    if (el.querySelector('.st-key-image-container')) {
      Object.assign(el.style, {
        width: '100%',
        padding: '0',
        minWidth: 'auto',
        maxWidth: 'initial'
      });
    }
  });
  

内容的提问来源于stack exchange，提问作者innov-aphp