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

Question

我有以下html，其中2个面板在彼此之内。我想将CSS仅应用于外部ky面板和ky面板主体。我怎样才能做到这一点？我想这样做的原因是因为面板主要有常见的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
    }
}

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