访问父元素

Question

我有下面的html和更少的

<div class="status">
    <div>
        <div>
            <p class="status-1">Test</p>
        </div>
    </div>
</div>

.status {
    div {
        div {
            p {
                color: red;

                .status-1 {
                    color: blue;
                }
            }
        }
    }
}

其中有一个嵌套在两个div中的<p>元素。现在，我希望将status-1类添加到基本div中，以创建如下所示的html结构：

<div class="status status-1">
    <div>
        <div>
            <p>Test</p>
        </div>
    </div>
</div>

但是，现在我不知道如何从.status元素内部访问p元素。我可以打字

.status {
    &.status-1 {
        div {
            div {
                p {
                    color: blue;
                }
            }
        }
    }
}

但是，由于有多个.status类(例如，status-0、status-1、status-2)，所以复制粘贴相同的代码会很糟糕。有没有更少的方式可以访问父.status元素？我希望能有这样的

.status {
    div {
        div {
            p {
                color: red;

                ->parent(.status.status-1) {
                    color: blue;
                }
            }
        }
    }
}

谢谢你们！

Answer 1

见父选择器，例如：

.status {
     p {
        color: red;
        .status-1& {
            color: blue;
        }
    }
}

注意，虽然生成的选择器是.status-1.status，但它仍然匹配class="status status-1"和class="status-1 status"元素。