如何在CSS中从子元素选择其外层父元素？

核心结论 #

CSS 没有原生的父元素选择器，你写的<选择器并非标准语法，所以样式完全不会生效。

为什么你的代码失效？ #

你尝试的<选择器不属于CSS规范内容，CSS仅支持从父元素向下选择子元素（比如>直接子元素选择器、空格后代选择器），无法反向从子元素定位到父元素。

可行的替代方案 #

方案1：使用:has()伪类（现代浏览器支持） #

:has()是CSS新增的伪类，可直接选择包含指定子元素的父元素，完美匹配你的需求：

.fc-daygrid-day-frame:has(.WORKSHEET_block) {
  background-color: green !important;
}

目前Chrome、Firefox 121+、Safari 15.4+等主流浏览器都已支持该特性。

方案2：添加自定义类（兼容性最优） #

如果需要兼容旧版浏览器，最稳妥的方式是给目标父元素添加自定义类，直接通过类选择器设置样式：
修改后的HTML：

<div class="fc-daygrid-day-frame has-worksheet-block">
  <div class="fc-daygrid-day-events">
    <div class="fc-daygrid-event-harness">
      <a class="WORKSHEET_block">My Value</a>
    </div>
  </div>
</div>

对应的CSS：

.fc-daygrid-day-frame.has-worksheet-block {
  background-color: green !important;
}

方案3：JavaScript辅助实现 #

若无法修改HTML结构，可通过JS遍历DOM找到目标父元素并设置样式：

document.querySelectorAll('.WORKSHEET_block').forEach(el => {
  // 向上查找最近的目标父元素
  const targetParent = el.closest('.fc-daygrid-day-frame');
  if (targetParent) {
    targetParent.style.backgroundColor = 'green';
  }
});

内容的提问来源于stack exchange，提问作者Ethic Or Logics