CSS 选择器 - 一个类/元素，它有一个带有类的元素答案

【问题标题】：CSS selector - a class/ element that has an element with classCSS 选择器 - 一个类/元素，它有一个带有类的元素
【发布时间】：2021-02-05 10:26:53
【问题描述】：

我正在使用 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 的子项。我尝试使用 has，但它不起作用。我该怎么做？

【问题讨论】：

this 回答你的问题了吗？

标签： css css-selectors

【解决方案1】：

你不能用 css 因为在 css 中你可以选择一个有特定父级的子级但你不能根据它的孩子来选择父母这就是为什么你必须使用 javascript（或者在这种情况下希望你有 jQuery）：首先添加样式：

.foo{
    border: 1px solid red;
}

然后使用 jQuery 将此样式添加到您的元素：

$('.dialog').find('.my-dialog-content').parents('.dialog').addClass('foo')

【讨论】：