访问父元素

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

其中有一个 <p> 元素嵌套在几个 div 中。现在我希望将 status-1 class 添加到基础 div 中，以创建这样的 html 结构：

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

但现在我不知道如何在 less 中从 p 元素内部访问 .status 元素。我可以输入

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

但是由于有多个 .status classes（例如 status-0、status-1、status-2）复制粘贴相同的位会很糟糕的代码。有什么方法可以访问父 .status 元素？我希望有类似

的东西

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

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

谢谢大家！

Answer 1

参见Parent Selectors，例如：

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

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

访问父元素

Access parent element

less