@supports属性语法错误

Question

我正在检查@supports属性，它适用于此代码 -

@supports(display: block) {
    .message{
        background: red;
    }
} 

这里它给出了红色背景，但下面的代码不起作用

.message{
    background: green;
    @supports(display: block){
        background: red;
    }    
}

在这种情况下，背景应为红色，但它是绿色的。我已经在Chrome边缘检查了这个，甚至在codepen上。有什么问题？

Answer 1

at-rules不能嵌套在样式规则中。无论你在哪里看到嵌套的@supports规则工作必须使用某种预处理器。