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类添加到基础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

见Parent Selectors，例如：

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

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

访问父元素

1 个答案: