使用jQuery在CSS中实现父选择器，该选择器会自动应用于DOM中的新元素

Question

CSS不支持父选择器，例如“选择包含<img>所有<p> <img> ”。

这里提出的一种解决方案是使用jQuery，例如：

$('#parent:has(#child)').addClass('my-special-class');

但是，我有一个<div>会定期用新内容更新，并且我需要继续将my-special-class重新应用到与该<div>中的选择器'#parent:has(#child)'相匹配的新元素。 。

怎么可以这样呢？

我正在设计第三方插件的样式，因此对其样式，事件等没有太多控制权。

Answer 1

一种解决方案是在容器div上绑定DOMSubtreeModified事件，然后在其中添加代码。

$('.container').on("DOMSubtreeModified",function(){
    $('.parent:has(.child)').addClass('special-child');
});

 // find elements var parent = $("#parent") var button = $("button") // handle click and add class button.on("click", function() { const el = '<div class="parent"><p class="child">Hello World</p></div>'; parent.after(el); }) $(function() { $('.parent:has(.child)').addClass('special-child'); $('.continer').on("DOMSubtreeModified", function() { $('.parent:has(.child)').addClass('special-child'); }); }) 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } .child { background: #fff; border-radius: 4px; padding: 10px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 4px auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } .special-child { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="continer"> <div class="parent" id="parent"> <p class="child">Hello World</p> </div> </div> <button>Add Child</button> 

Answer 2

如果添加以下jquery和仅一个类，它将像:visited一样工作：

$("div.my-div").click(function(){
    $(this).addClass("visited");
});

只需向CSS添加一个类：

.visited:hover{
  outline: 2px solid orange;
}

如果将此代码与当前代码一起添加，您将获得与:visited相同的功能。

这是我在您的代码上尝试过的小提琴：

https://jsfiddle.net/thisisdg/27srmuy6/