SCSS中的目标特定选择器
SCSS中的目标特定选择器
提问于 2016-08-23 14:57:11
是否有方法修改选择器链中的祖先之一？
这是我想要制作的CSS：
#ViewCardDialog > header::after {
// styles
}
#ViewCardDialog.blocked > header::after {
// blocked styles
}
#ViewCardDialog.on-hold > header::after {
// on hold styles
}我想知道这样的事情是否可能：
#ViewCardDialog {
> header {
&::after {
// styles
@parent(.blocked) & {
// blocked styles
}
@parent(.on-hold) & {
// on hold styles
}
}
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2016-08-23 16:49:02
如果将.blocked和.on-hold类附加到标头上，则父选择器可能会工作，但我认为考虑到您拥有的内容，您需要这样做：
#ViewCardDialog {
> header::after {
// styles
}
&.blocked > header::after {
// blocked styles
}
&.on-hold > header::after {
// on hold styles
}
}Stack Overflow用户
发布于 2016-08-24 07:35:00
也许是有点混乱的代码，但这是我找到的最好的方式来实现你想要的。首先为父变量定义一个变量，然后使用替换函数在父类中添加类，还需要@at-root指令以防止选择器重复使用：
SASS
#ViewCardDialog {
$root: &;
> header {
&::after {
color: blue;
@at-root #{selector-replace(&, $root, $root+".blocked")} {
color: red;
}
@at-root #{selector-replace(&, $root, $root+".on-hold")} {
color: green;
}
}
}
}输出
#ViewCardDialog > header::after {
color: blue;
}
#ViewCardDialog.blocked > header::after {
color: red;
}
#ViewCardDialog.on-hold > header::after {
color: green;
}Stack Overflow用户
发布于 2016-08-23 21:19:55
#ViewCardDialog {
> header{
&:after {
// styles
}
}
&.blocked{
> header{
&:after {
// styles
}
}
}
&.on-hold{
> header{
&:after {
// styles
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39104565
复制相关文章
相似问题
腾讯云开发者
