访问父元素

时间:2015-04-07 12:09:15

标签: less

我有以下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-0status-1status-2),它们很难复制粘贴相同位代码。有没有办法,我可以访问父.status元素?我希望有像

这样的东西
.status {
    div {
        div {
            p {
                color: red;

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

谢谢你们!

1 个答案:

答案 0 :(得分:1)

Parent Selectors,例如:

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

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