如何控制一个节点父元素的样式

目前一共有三种方式可供参考

• 1、JS实现，操作DOM
• 2、纯CSS实现：兼容性极好
• 3、纯CSS实现：新特性 :has() 实现类似“父选择器”

我们先看为什么要控制一个节点的父元素的样式？ 如图内4、5两个父子关系的DOM，我们此刻只能控制4的DOM，无法控制5的DOM，所以在思考如何通过4去控制5？

1、JS控制

    if (this.domControllerTimer) clearTimeout(this.domControllerTimer);
    this.domControllerTimer = setTimeout(() => {
      const doms = document.getElementsByClassName('domController');
      if (doms.length) {
        for (let i = 0; i < doms.length; i++) {
          const targetDom = doms[i].parentNode.parentNode;
          if (targetDom.style.background !== 'rgb(250, 229, 229)') {
            targetDom.style.background = 'rgb(250, 229, 229)';
          }
        }

2、创建一个元素作为4的兄弟元素A，给5设置position:relative; 给A设置positon: absolute; 设置A的样式类似就是在操作5的元素样式；

:global {
   // 5的DOM
  .ant-select-selection-item {
    position: relative;
    z-index: 1;
  }
  
  // 4的兄弟的DOM
  .domController {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: rgb(250, 229, 229);
  }
}

原理如图：A撑起来了覆盖5的样式

3、:has() 伪类是一个功能非常强大的伪类，因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能，对CSS的开发会有颠覆性的影响。

• 以目前浏览器的版本更新速度，不出一年，:has() 伪类就可以在实际项目中使用了，这是一个务必要学习的CSS伪类，可以在很多场合减少开发的成本。

举个简单的例子，下面的 CSS 代码表示如果 <a> 元素里面有 <img> 元素，则这个 <a> 元素就会匹配。

a:has(img) { display: block; }

虽然好，但是项目内还不能使用，防止兼容性的问题，明年今日就是它的出头之日！

总结

20221108~20231108期间，建议还是先考虑1、2方案，2的方案性能较好，1的方案暴力省事但是耗性能。 目前作者是使用的方案2