检查是否存在特定的父选择器答案

【问题标题】：Check if specific parent selector exists检查是否存在特定的父选择器
【发布时间】：2018-07-15 11:15:21
【问题描述】：

我有以下 html，其中有 2 个面板。我只想将 CSS 应用于外部 ky-panel 和 ky-panel 主体。我怎样才能做到这一点？我之所以要这样做是因为面板主要具有常见的 CSS，但我想在面板嵌套时更改一些内容。

<div class="ky-panel">
    <div class="ky-panel-body">
        <div class="ky-panel">
            <div class="ky-panel-body">
                some HTML with some CSS
            </div>
        </div>
    </div>
</div>

我尝试了以下 CSS，但它不起作用：

@mixin ky-panel-body {
    @if & {
        some CSS
    }
}

【问题讨论】：

通常这种类型的逻辑会放在你的模板（或模板生成器）中，你会在外部元素中添加一个类。
在这种特定情况下，您可以使用:not，如果您将其与子选择器结合使用：:not(.ky-panel-body) > .ky-panel、:not(.ky-panel-body) > .ky-panel > .ky-panel-body
此建议无效。我已经试过了
“以下 CSS”不是 CSS。请将 CSS 添加到您的帖子中。
Is there a CSS parent selector?的可能重复

标签： jquery html css sass

【解决方案1】：

对我来说，如果你保持这样的结构，除了将你的 CSS 应用到 ky-panel-body 和 ky-panel 并在它们嵌套时恢复它之外，你没有其他解决方案：

.ky-panel{
    border: 1px solid black; //Just an example

    .ky-panel-body{
        color: red; //Just an example

        .ky-panel{
            border: inherit; //Revert your changes

            .ky-panel-body{
                color: inherit; //Revert your changes
            }
        }
    }
}

【讨论】：