影响：focus'd元素的父元素（首选纯CSS + HTML）[重复]

Posted 2023-03-06

【中文标题】影响：focus\'d元素的父元素（首选纯CSS + HTML）[重复]

【英文标题】：Affecting parent element of :focus'd element (pure CSS+HTML preferred) [duplicate]影响：focus'd元素的父元素（首选纯CSS + HTML）[重复]

【发布时间】：2011-01-13 19:56:21

【问题描述】：

当 <input> 或 <a> 是 :focus'd（或任何其他动态伪类）时，我如何更改父 <div> 的背景？

例如

<div id="formspace">
<form>
<label for="question">
How do I select #formspace for the case when a child is active?</label>
<input type="text" id="question" name="answer"/></form></div>

【问题讨论】：

不：en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitations（第二个要点）

谢谢大家。只是检查一下，因为我似乎无法想出任何纯 CSS 和 html 标签移动的方法。我知道 javascript 可以做到；只是想让我的手保持清洁。

我认为这个问题不应被视为与那个问题重复。这个问题只是询问特定情况，而不是关于父选择器的一般问题。对于这种情况可能有一些解决方案，但不是通用解决方案，尽管通用解决方案没有有解决方案。

链接的问题不是这个问题的正确副本，因为它没有提到:focus——只有父选择器。有一个新的 :focus-within 伪选择器具有一些浏览器支持，可以满足 OP 的问题，但不能正确回答链接的“重复”问题。我们可以将此问题取消标记为重复问题或链接更准确的重复问题吗？ @Paulie_D @kapa

【参考方案1】：

我能想到的唯一方法是使用 JavaSCript：

function focusLink(isOnFocus)

    if (isOnFocus)
      document.getElementById('formspace').className = "<make a focus class name here>";
    else
      document.getElementById('formspace').className = "<default class name here>";

...

<input onFocus="focusLink(true)" onBlur="focusLink(false)">

希望有帮助！

【参考方案2】：

很遗憾，css 不支持父选择器。 :( 所以唯一的办法就是使用像jQuery parent method这样的javascript。

更新： CSS 选择器 Level 4 将支持父选择器！ http://www.w3.org/TR/selectors4/#subject

【讨论】：

Seems like parent selectors won't make it.