Question

有没有办法修改选择器链中的一个祖先？

这是我想要制作的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
            }
        }

    }

}

Answer 1

如果您将.blocked和.on-hold类附加到标题中，那么您的父选择器可能会有效，但我认为考虑到您的要求，您需要这样：

#ViewCardDialog {
    > header::after {
            // styles
    }
    &.blocked > header::after {
        // blocked styles
    }

    &.on-hold > header::after {
        // on hold styles
    }
}

Answer 2

#ViewCardDialog {
    > header{
        &:after {
            // styles
        }
    }
    &.blocked{
        > header{
            &:after {
                // styles
            }
        }
    }
    &.on-hold{
        > header{
            &:after {
                // styles
            }
        }
    }
}

Answer 3

可能是有点混乱的代码，但是我发现实现你想要的最好方法。首先我为父类定义一个变量，然后我使用replace函数在父类中添加类，也需要@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;
}

在SCSS中定位特定选择器

3 个答案: