如何基于祖先元素的:has选择器条件修改指定后代元素？

完全可行。利用CSS的:has()伪类，我们可以基于.grid-container内部是否存在指定子元素，来给容器下的.thirdElement设置不同边框样式。

实现代码 #

只需在原有CSS基础上添加两个条件选择器即可：

.grid-container {
   background-color: yellow;
}

.grid-container:has(.someClass1) {
   background-color: red;
}

.grid-container:has(.someClass2) {
   background-color: green;
}

/* 默认样式 */
.thirdElement {
   border: 5px solid grey;
}

/* 容器包含.someClass1时的样式 */
.grid-container:has(.someClass1) .thirdElement {
   border: 5px solid black;
}

/* 容器包含.someClass2时的样式 */
.grid-container:has(.someClass2) .thirdElement {
   border: 5px solid blue;
}

完整示例代码 #

<div class="grid-container">
   <div>
     <div>
        <div class="someClass2">Marker 2</div>
     </div>
   </div>
   
   <div>
      <div>
         <div class="thirdElement">
            Unrelated element under .grid-container
         </div>
      </div>
   </div>
</div>

内容的提问来源于stack exchange，提问作者gene b.