父选择器的用例

CSS 中存在“父选择器”是人们经常提到的 CSS 非常需要的东西。 我感觉自己也无数次想过这个想法，但当我让大脑想一个用例时，却很难想到。 好吧，我刚想到一个，所以我想在这里记录一下。

经典的父/子关系

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

假设让这个父级元素拥有隐藏溢出，同时让子级使用绝对定位是有道理的。

.parent {
   overflow: hidden;
   position: relative;
}

.child {
   position: absolute; 
}

现在假设有一个特殊情况，需要将子级定位在父级元素之外，并且仍然可见。 隐藏溢出仍然是大多数情况下的良好默认值，因此最好保留此规则，但在这种非常特殊的情况下，我们需要覆盖该溢出。

.special-child {
   position: absolute; 
   bottom: -20px; /* needs to be slightly outside parent */
}

/* Not real, but just to make a point */
.special-child:parent(.parent) {
   overflow: visible;
}

上面的选择器是假的，但它的意思是“选择 .special-child 的父级元素”，这将允许根据需要进行覆盖。 也许就像这样

.parent < .special-child {

}

… 这样会选择左侧的元素而不是右侧的元素。 谁知道呢？ 也许这两个都存在问题，最终的语法会是别的。 也许我们永远不会得到它。 我不知道。 只是记录一下我遇到的一个真实的用例。

你可能会想，“为什么不直接在父级元素上使用另一个特殊类？” 我本来会这么做的，但是这个父级元素是通过一个不提供在我选择的父级元素上添加类的 API 由第三方库注入的。 最终，我不得不通过编写一些自定义 JavaScript 来添加该类到父级元素，该 JavaScript 查询 DOM 以查找 .special-child，找到父级元素，然后在其中添加该类。

你们有没有其他父选择器的用例？

---

来自 Uzair Hayat 的一个

我的项目中有一个 <input>，它被包装在一个 <div> 中。 <div> 具有一些设计元素，这些元素需要在 <input> 处于 :focus 状态时生效。 我可以使用 ::before 和 ::after 伪元素，但输入元素不支持它们，因为它们是替换元素。 现在，我使用 JavaScript 来检测输入元素是否处于焦点状态，并在父级 div 上应用一个类。 我希望我能这样做……

input:focus:parent(div):after {
    display: block;
    /* display design changes when focused */
}