我有一个 LESS 文件,我在其中将一大堆规则包装在一个主体类中:
body.programme {
#VideoWrapper {
border: 1px solid red;
}
etc...
}
但是,如果正文中存在另一个类,我想更改#VideoWrapper 的样式。我以为我可以做以下事情......
body.programme {
#VideoWrapper {
border: 1px solid red;
body.inside & {
border: 1px solid yellow;
}
}
etc...
}
基本上我正在尝试输出以下 CSS 规则:
body.programme #VideoWrapper {
border: 1px solid red;
}
body.programme.inside #VideoWrapper {
border: 1px solid yellow;
}
如果不从父 body.programme 包装器中提取规则,这在 LESS 中甚至是可能的吗?
最佳答案
我认为使用 & 符号选择器应该可以解决问题,就像这样:
body.programme {
#VideoWrapper {
// Your styles
}
&.inside {
#VideoWrapper {
// Different styles
}
}
}
另一种方法(唉,这意味着将这些样式移出 body
)可能是:
#VideoWrapper {
// generic styles
body.programme & {
// special styles
}
body.programme.inside & {
// further styles
}
}
但这也可能无法满足您的强制症。
关于css - 在 LESS 中嵌套祖先规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44585559/