SCSS中的目标特定选择器
是否有方法修改选择器链中的祖先之一？
这是我想要制作的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 08: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-23 23: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 13:19:55
#ViewCardDialog {
> header{
&:after {
// styles
}
}
&.blocked{
> header{
&:after {
// styles
}
}
}
&.on-hold{
> header{
&:after {
// styles
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39104565
复制相关文章
点击加载更多
相似问题
基于代理条件的资源获取方法
设置/获取JSessionID -代理块集-cookie属性
从catch块中的资源尝试中获取变量
基于随机赋值创建代理集
在try块中的Javascript集const变量
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
