如何使选中的子元素显示在父级灰色遮罩层上方

需求：给所有子元素添加灰色遮罩层，但带有selected类的子元素不受遮罩影响（不呈现灰色效果）。

现有DOM结构如下：

<div class="parent">

  <!-- 这个subParent是绝对定位的，我不能移除它... -->
  <div class="subParent1">
    <div class="subParent2">

      <!-- 这个子元素我希望在遮罩层上方，也就是不被灰化 -->
      <div class="child selected">child</div>

      <div class="child">child</div>
      <div class="child">child</div>
    </div>
  </div>

  
  <!-- 这个组件在DOM结构中位于subParent下方 -->    
  <div class="grayOverlay"></div>
  
</div>

是否可以使用伪元素来实现该效果？注：已调整子元素的嵌套层级以匹配实际代码结构。

完全可以用伪元素实现，核心是通过堆叠层级控制，让遮罩覆盖普通元素，同时让selected类的子元素突破遮罩：

• 移除原有的.grayOverlay元素（如果无法删除，就设置display: none隐藏它），用.parent::before伪元素作为遮罩层。
• 给.parent设置position: relative，让伪元素基于父容器定位。
• 配置伪元素样式：绝对定位铺满整个父容器，使用半透明灰色背景，设置z-index: 1，确保它能覆盖普通子元素。
• 给.child.selected设置position: relative和更高的z-index: 2，同时不要给它的父级.subParent1、.subParent2设置z-index——如果父级有z-index，会形成独立的堆叠上下文，子元素的层级无法突破父级范围。

具体代码示例：

.parent {
  position: relative;
  width: 400px;
  height: 300px;
}

/* 伪元素遮罩 */
.parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.subParent1, .subParent2 {
  position: absolute;
  /* 禁止设置z-index，避免创建堆叠上下文 */
}

.child {
  width: 80px;
  height: 80px;
  background: #fff;
  margin: 10px;
}

.child.selected {
  position: relative;
  z-index: 2; /* 让选中元素浮在遮罩上方 */
}

如果必须保留原有的.grayOverlay，也可以把遮罩逻辑转移到它上面，只要保证它的z-index低于.selected的层级即可，但用伪元素的方式更简洁，不需要额外的DOM元素。

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