我能否使用纯CSS根据祖先元素的位置属性来设置元素的样式？

Question

根据祖先元素的CSS属性值选择元素是否可能？假设我有以下HTML文本：

<div><!-- ancestor -->
  <!-- I may have N level descendants which are as well ancestors for the upcoming div -->
  <div class="myTarget">
    The div I want to target
  </div>
</div>

除了祖先元素中有一个CSS属性 display: table-cell，否则应该使用position: relative，否则就应该使用position: absolute，至于祖先元素的信息，我并不知道。

.myTarget {
  position: relative;
}

/*************************************************************************************************
 * This is actually the question, how to target .myTarget when some ancestor div contains a given
 * cssProperty. Code below is just pseudo-code not actual CSS.
 *************************************************************************************************/
div[cssProperty=desiredValue] .myTarget {
  position: absolute;
}

我猜想可能无法实现，但是由于可以根据元素的属性选择元素，所以我认为或许可以根据其CSS属性进行选择。

- Miles

---

如果您的CSS是内联的，那么div[style="display: table-cell"]可能是可行的。或者使用JS来检查父级属性。 - Justinas

是的，您可以根据祖先属性样式化元素，这被称为CSS属性样式。在此处阅读有关它的更多信息：https://www.w3schools.com/css/css_attribute_selectors.asp - Dev Man

如果您可以向具有 display: table-cell 属性的元素添加一个类，则可以轻松完成此操作。 - nivesnine

你的情况是没有控制祖先标记和/或样式吗？这意味着你不知道你的元素将被插入到哪里？否则，如果你知道一个元素被渲染为表格单元格，那么你就知道了。如果它在文档生命周期中发生变化，你可以附加一个事件处理程序来检测变化并通过切换myTarget的规则来对其进行操作。说实话，我认为我们正在处理一个XY问题的情况。 - Armen Michaeli

是的@amn，这就是问题所在：我无法访问祖先或其样式。这是一个可重复使用的组件，可能会出现在任何地方。如果可能的话，我想避免使用JS解决方案，并尝试使用纯CSS解决它。 - Miles

简短回答：不可能根据元素或其相关元素的样式来选择元素，否则会给CSS引入另一个维度的复杂性。只能通过[style~="display: ..."]选择器实现，但在不了解您的问题更多信息的情况下，我不会这样做。长篇回答：您是否阅读了关于XY问题的链接文章，并且是否愿意编辑您的答案以详细说明您正在开发什么类型的组件，以及为什么它能够基于是否是表格单元格元素的一部分而切换其定位策略如此至关重要？ - Armen Michaeli

Answer 1

我的解决方案是一个类：

<div class="ancestor"> <!-- ancestor -->
  <div class="myTarget">
    The div I want to target
  </div>
</div>

还有CSS：

.myTarget {
  position: relative;
}

div.ancestor > .myTarget {
  position: absolute!important;
}

- SrAxi

---

不幸的是，最初我对我的祖先没有控制权，这并不是一个选项。当然，我可以通过JS获得访问权限，但这恰恰是我试图避免的，也是我询问是否有可能通过纯CSS实现我的目标的原因。 - Miles