我有以下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;
}
}
}
}
}
谢谢你们!
答案 0 :(得分:1)
见Parent Selectors,例如:
.status {
p {
color: red;
.status-1& {
color: blue;
}
}
}
请注意,虽然生成的选择器为.status-1.status
,但仍会匹配class="status status-1"
和class="status-1 status"
元素。