如何解决CSS选择器-一个类/元素,其元素带有类
我正在使用CSS设计网站的样式。在我的项目中,我需要以一种有点怪异的方式将样式应用于模式。
我具有以下顺序的元素。
<div class="dialog">
<div class="dialog-content">
<div class="my-dialog-content">
//I can change the my-dialog-content and the content within it.
</div>
</div>
</div>
在上面的标记中,.dialog和.dialog-content随npm软件包一起提供,因此我无法对其进行控制。这意味着我无法向它们添加新的类。我试图覆盖那些类/元素,但是我试图仅覆盖一个对话框。如果我按照以下说明进行操作,
.dialog {
border: 1px solid red;
}
它将样式应用于整个项目中的所有对话框/模态。 我正在寻找一个.dialog选择器,其中包含带有.my-dialog-content子项的.dialog。我尝试使用has,但无法正常工作。我该怎么办?
解决方法
您无法在CSS中使用它 因为在CSS中,您可以选择具有某些父项的子项 但您不能基于其子项选择父项 因此,您必须使用javascript(或者在这种情况下希望您使用jQuery): 首先添加样式:
.foo{
border: 1px solid red;
}
然后使用jQuery将这种样式添加到您的元素中:
$('.dialog').find('.my-dialog-content').parents('.dialog').addClass('foo')
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。