css动态添加父元素

Posted 2023-05-13

CSS都是写样式的，不涉及动态操作，所以没有寻找父元素的技能，如果你想给某个元素的父元素设样式，直接给它加class或id就好了。js是有可能涉及到运行过程中有dom的动态操作的，所以有这个技能，就是xx.parentNode， 就能直接拿到xx的父元素了。 参考技术A 元素只能有一个父元素。

$j($highlights[i]).parent().addClass('lowOpacity');
此代码将向每个高亮元素的父级添加一个类。 您还可以像这样重构代码：
var $highlights = $j("div.ab-highlights ul li a");
$highlights.hover(
function ()
$j(this).children().addClass('active');
$j($highlights).not(this).parent().addClass("lowOpacity"); //Thanks Felix +1
,
function ()
$j(this).children().removeClass('active');

); 参考技术B CSS都是写样式的，不涉及动态操作，所以没有寻找父元素的技能， 参考技术C 元素只能有一个父元素。$j($highlights[i]).parent().addClass('lowOpacity');此代码将

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

【中文标题】影响：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.