Question

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

提出的一个解决方案here是使用jQuery，例如：

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

但是，我有<div>定期更新新内容，我需要继续将my-special-class重新应用于与{{1}内的选择器'#parent:has(#child)'匹配的新元素}}

怎么能这样做？

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

Answer 1

一种解决方案是在容器div上绑定DOMSubtreeModified事件并在里面添加代码。

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

＆＃13;

// 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');
  });

})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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/

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

2 个答案: